Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: innerhtml to write multiple times

  1. #1
    Join Date
    Mar 2009
    Posts
    10
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default innerhtml to write multiple times

    How to writing multiple times using innerhtml? or different method?

    Code:
    <html>
    <head>
    <script type="text/javascript">
    function changeLink()
    {
    document.getElementById('myAnchor').innerHTML="test";
    }
    </script>
    </head>
    
    <body>
    <input type="button" onclick="changeLink()" value="Change link">
    <div id="myAnchor" class="pb">1</div>
    <div id="myAnchor" class="pb">2</div>
    <div id="myAnchor" class="pb">3</div>
    <div id="myAnchor" class="pb">4</div>
    </body>
    </html>
    thanks.

  2. #2
    Join Date
    Jun 2007
    Posts
    543
    Thanks
    3
    Thanked 78 Times in 78 Posts
    Blog Entries
    1

    Default

    id is supposed to be a unique identifier, you can not use the same id for multiple elements.
    [Jasme Library (Javascript Motion Effects)] My Site
    /\/\@§†ê® §©®¡þ† /\/\@|{ê®
    There are 10 kinds of people in the world, those that understand binary and those that don't.

  3. The Following User Says Thank You to Master_script_maker For This Useful Post:

    z2z (03-25-2009)

  4. #3
    Join Date
    May 2006
    Location
    Alaska
    Posts
    163
    Thanks
    5
    Thanked 2 Times in 2 Posts

    Default

    innerHTML is the inner HTML of an element. Therefore, if you set it to something like this:
    Code:
    document.body.innerHTML = "blah";
    Anything that was in the element will disappear, and it will be replaced with whatever you set it to. If you want to add to the content, you can do it a couple of ways:
    Code:
    document.body.innerHTML += "blah";
    OR
    Code:
    document.body.innerHTML = document.body.innerHTML + "blah";
    Those would both ad "blah" to the end of the element.

  5. The Following User Says Thank You to ??? For This Useful Post:

    z2z (03-25-2009)

  6. #4
    Join Date
    Mar 2009
    Posts
    10
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    I was trying use it on phpbb for posted message ..so now i have edited and added msgpostid i.e. id="msg+random number"..it looks like this now.

    Code:
    <div id="msg88344" class="postbody"><img src="./images/smilies/tongue.gif" alt=":p" title="tongue"></div>
    <div id="msg88373" class="postbody">Test!</div>
    <div id="msg90986" class="postbody"><img src="./images/smilies/biggrin.gif" alt=":)" title="biggrin"></div>
    Every post has different id ..i want replace each one of them with "blah!"

  7. #5
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Don't use innerHTML. It is non-standard, hard to work with if you have to do anything more advanced, and generally leads to poor code.

    Instead, remove all elements, add a text node, and then set that text node's nodeValue to your desired text:

    Code:
    var Dom = function() {
        function clear(el) {
            while (el.hasChildNodes())
                el.removeChild(el.firstChild);
    
            return el;
        }
    
        function setText(el, text) {
            return Dom.clear(el)
                .appendChild(document.createTextNode(text))
                .parentNode;
        }
    
        return {
            clear: clear,
            setText: setText
        };
    }();
    Now, the problem occurs when selecting your element. Your 'random numbers' style is horrible because it means we have to search through every element in the document looking for one with an ID of /msg\d+/. Now, assuming you can rework that to look like this:

    Code:
    <div id="msg0" class="postbody">
        <img src="./images/smilies/tongue.gif" alt=":p" title="tongue">
    </div>
    
    <div id="msg1" class="postbody">
        Test!
    </div>
    
    <div id="msg2" class="postbody">
        <img src="./images/smilies/biggrin.gif" alt=":)" title="biggrin">
    </div>
    ... then we can do:

    Code:
    function() {
        for (var i = 0, e; e = document.getElementById("msg" + i); ++i)
            Dom.setText(e, "blah!");
    }();
    Otherwise, we really do have to check every element:

    Code:
    function() {
        var a = document.getElementsByTagName("*")
                || document.all,
            rx = /msg\d+/;
    
        for (var i = 0, e; e = a[i]; ++i)
            if (rx.test(e.id))
                Dom.setText(e, "blah!");
    }();
    ... which is a lot slower (as well as considerably more complicated).
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  8. The Following User Says Thank You to Twey For This Useful Post:

    z2z (03-25-2009)

  9. #6
    Join Date
    Mar 2009
    Posts
    10
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    i tried didn't work!

    Code:
    <html>
    </head>
    <script type="text/javascript">
    var Dom = function() {
        function clear(el) {
            while (el.hasChildNodes())
                el.removeChild(el.firstChild);
    
            return el;
        }
    
        function setText(el, text) {
            return Dom.clear(el)
                .appendChild(document.createTextNode(text))
                .parentNode;
        }
    
        return {
            clear: clear,
            setText: setText
        };
    }();
    function() {
        var a = document.getElementsByTagName("*")
                || document.all,
            rx = /msg\d+/;
    
        for (var i = 0, e; e = a[i]; ++i)
            if (rx.test(e.id))
                Dom.setText(e, "blah!");
    }();
    </script>
    <head>
    <body>
    <div id="msg0" class="postbody">
        <img src="./images/smilies/tongue.gif" alt=":p" title="tongue">
    </div>
    
    <div id="msg1" class="postbody">
        Test!
    </div>
    
    <div id="msg2" class="postbody">
        <img src="./images/smilies/biggrin.gif" alt=":)" title="biggrin">
    </div>
    </body>
    </html>
    i want use it with http://adblockdetector.com/ script.

    If detected then replace the posts

  10. #7
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    You have to do it after the elements have actually been loaded — you can't modify them if they're not there. Put the block that looks like function() { ... }(); in a separate <script> element after your <div>s in the HTML, or assign the whole thing as an onload (onload = function() { ... };; note the removal of the final pair of brackets).
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  11. The Following User Says Thank You to Twey For This Useful Post:

    z2z (03-25-2009)

  12. #8
    Join Date
    Mar 2009
    Posts
    10
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    Okay ..its working now!

    But doesn't work in case post div contains link or img or another div inside?

  13. #9
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Yes, it will: it clears the element first, so it doesn't matter what else is inside it.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends français | entiendo español | tôi ít hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  14. The Following User Says Thank You to Twey For This Useful Post:

    z2z (03-25-2009)

  15. #10
    Join Date
    Mar 2009
    Posts
    10
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    Now its working ..but

    Code:
    Dom.setText(e, "<h3 style=\"color:red;\">An Ad blocker has been detected!...Please consider disabling for this site</h3>");
    ???
    Last edited by z2z; 03-25-2009 at 05:15 PM. Reason: spelling

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •