...

View Full Version : Javascript to insert divs into the HTML



nitzanb
09-26-2012, 08:40 PM
Hello everybody, this is my first post overhere:

Im using javascript to insert divs into the HTML, say.. 10 divs, and Im trying to give each DIV its own "id" :



function mf()
{
var i=0,x="";
while (i<10)
{
x=x + '<div id="a"' + i + '>this is the #' +i+ 'time</div> ';
i++;
}
document.getElementById("down").innerHTML=x;

}


its working, but the ID is messed up..
it shows id="a"3
can anyone tell me how to make it id=a1..2..3 ?
thank you.

devnull69
09-26-2012, 09:48 PM
Look at this part of the code


'<div id="a"' + i

So after i has been converted into a string it will be appended to <div id="a". The result for i==3 will be <div id="a"3
Try this


x=x + '<div id="a' + i + '">this is the #' + i + 'time</div>';

nitzanb
09-27-2012, 01:15 AM
Excellent, thank you!
Altough I dont really understand how you handled the "'s..

devnull69
09-27-2012, 07:01 AM
You'll have to think about outer and inner quotes (in pairs of course). If the resulting string has errors, first omit the outer quotes and replace inner variables with a value

Example:


// ' is the outer quote
'<a href="mypage"' + i + '"_tst.html">a link</a>'

// omit outer quotes (on paper not in code), replace inner variable with a value (e.g. 5)
<a href="mypage"5"_tst.html">a link</a>

// aah the two inner double quotes should not be there, resulting code
'<a href="mypage' + i + '_tst.html">a link</a>'

devnull69
09-27-2012, 09:30 AM
EDIT: this is an outdated response

nitzanb
09-27-2012, 09:51 PM
Ill work on that.
Thank you very much

felgall
09-27-2012, 09:56 PM
There isn't much point in giving the divs ids if you are inserting them that way because the JavaScript will not be able to use the divs subsequently to interact with the generated code because JavaScript interacts with the DOM version of the page and innerHTML only updates what is displayed and not the actual document that the JavaScript sees.

If you want to be able to actually interact with those divs from JavaScript after creating them then you'd have to use the proper JavaScript DOM commands to create them instead of innerHTML.

xelawho
09-27-2012, 10:01 PM
can you clarify a little felgall, because from my understanding of what you are saying, this shouldn't work...


<body>
<div id="base"></div>
<script>
document.getElementById("base").innerHTML="<div id='test'></div>";
document.getElementById("test").innerHTML="hello";
</script>
</body>

devnull69
09-28-2012, 07:06 AM
xelawho's example works perfectly on current Firefox and Chrome as well as IE8

xelawho
09-28-2012, 01:47 PM
... which is why I asked. I'm struggling to find any DOM interaction that you can't perform on a div created using innerHTML:



<body>
<div id="base"></div>
<script>
document.getElementById("base").innerHTML="<div id='test'></div>";
setTimeout(function(){document.getElementById("test").innerHTML="hello";},1000)
setTimeout(function(){document.getElementById("test").style.backgroundColor="red";},2000)
setTimeout(function(){document.getElementById("test").id="change";
document.getElementById("change").style.backgroundColor="blue";
},3000)
setTimeout(function(){
inp=document.createElement("button");
inp.innerHTML="button"
document.getElementById("change").appendChild(inp);
},4000)
setTimeout(function(){document.getElementById("base").children[0].style.backgroundColor="green"},5000)
setTimeout(function(){document.getElementsByTagName("div")[1].style.backgroundColor="yellow"},6000)
setTimeout(function(){document.getElementById("base").removeChild(document.getElementById("change"))},7000)
</script>
</body>


like you say, FF, Chrome and IE8 have no problems with the above. Maybe some other browser?

nitzanb
09-29-2012, 03:18 AM
Thank you guys,
So are you saying I *should* give id's to the divs?
Will I be able to interact with them after they're created?

Sorry for the late response, cant seem to make it so I get an email when some one responds to my question.. -/

xelawho
09-29-2012, 04:19 AM
What I'm saying is that I can't think of anything that you would want to do to a div that you can't do if you give them IDs and create them the way you are doing. If felgall ever elaborates maybe he will have an example of something you can't do with elements created via the innerHTML method.

The other way to do it is outlined in the examples starting here (http://javascriptexample.net/dom17.php), in case you are interested.

or more specifically, in your case:


var i=0;
while (i<10) {
var thediv=document.createElement("div")
thediv.id="a"+i;
thediv.appendChild(document.createTextNode('this is the #' +i+ 'time'));
document.getElementById("down").appendChild(thediv);
i++;
}

nitzanb
09-29-2012, 07:01 PM
Im not at that level but I sure will study this.
Thank you.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum