PDA

View Full Version : innerhtml to write multiple times



z2z
03-24-2009, 07:02 PM
How to writing multiple times using innerhtml? or different method?


<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:


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:


document.body.innerHTML += "blah";

OR


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.


<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:


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:


<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:


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:


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!


<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 :D

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


Dom.setText(e, "<h3 style=\"color:red;\">An Ad blocker has been detected!...Please consider disabling for this site</h3>");


???

Twey
03-25-2009, 05:40 PM
That isn't text, it's HTML. You shouldn't be processing strings of HTML in your Javascript: use the abstraction provided by the DOM.

z2z
03-26-2009, 08:03 AM
...that was bouncer :o

Twey
03-27-2009, 11:44 AM
The element for your HTML above would be:
var el = document.createElement("h3")
.appendChild(document.createTextNode("An Ad blocker has been detected!...Please consider disabling for this site"))
.parentNode;

el.style.color = "red";You'd set it as the only child of the element parent like so:
Dom.clear(parent).appendChild(el);