innerhtml to write multiple times

**z2z** · 03-24-2009, 07:02 PM

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.

**Master_script_maker** · 03-24-2009, 07:42 PM

id is supposed to be a unique identifier, you can not use the same id for multiple elements.

**???** · 03-24-2009, 08:56 PM

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.

**z2z** · 03-25-2009, 07:16 AM

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!"

**Twey** · 03-25-2009, 10:04 AM

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).

**z2z** · 03-25-2009, 11:14 AM

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

**Twey** · 03-25-2009, 01:04 PM

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).

**z2z** · 03-25-2009, 03:21 PM

Okay ..its working now!

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

**Twey** · 03-25-2009, 03:58 PM

Yes, it will: it clears the element first, so it doesn't matter what else is inside it.

**z2z** · 03-25-2009, 04:58 PM

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>");

???

Thread: innerhtml to write multiple times

Thread Tools

Search Thread

innerhtml to write multiple times

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

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

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

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

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

Bookmarks

Bookmarks

Posting Permissions