tinfanide Posted May 10, 2011 Share Posted May 10, 2011 Just wonder how the even number items have got some texts behind (appended).Please do help! Thank you. <script> var i; for(i=1;i<=10;i++){ document.write("<span>" + "pt" + i + "</span>" + "<br />"); var span = "'<span>' + 'pt' + i + '</span>'"; if(i%2==0){ span.innerHTML = "even"; } } </script> Link to comment Share on other sites More sharing options...
tinfanide Posted May 10, 2011 Author Share Posted May 10, 2011 Just wonder how the even number items have got some texts behind (appended).Please do help! Thank you.<script> var i; for(i=1;i<=10;i++){ document.write("<span>" + "pt" + i + "</span>" + "<br />"); var span = "'<span>' + 'pt' + i + '</span>'"; if(i%2==0){ span.innerHTML = "even"; } } </script> Just worked out something like this:<script> var i; for(i=1;i<=10;i++){ document.write("<span>" + "pt" + i + "</span>"); if(i%2==0){ document.write(" even"); document.write("<br />"); } else {document.write("<br />");} } </script> It works as I wanted: add "even" after an even number and add breaking space after...But originally I wanted to use getElementsByTagName. Just wonder why I cannot use it in a variable?If you know, please tell me why. Thanks. Link to comment Share on other sites More sharing options...
MrFish Posted May 10, 2011 Share Posted May 10, 2011 Span in the original post was a string not a DOM element. To create a DOM element in code you would do this- span = document.createElement("span");span.innerHTML = "even";document.appendChild(span); Link to comment Share on other sites More sharing options...
dsonesuk Posted May 10, 2011 Share Posted May 10, 2011 It not a good idea to use document.write it is very problematic.it would be best to write these into a parent container, and add 'even' to the span, as you loop through each even numbered loop.you can only really use getElementsByTagName on those elements that have already been created.below you will find both methods with and without getElementsByTagName. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/window.onload=function(){var parent_elem = document.getElementById("span_placement");var populate = "";for(i=1;i<=10;i++) { if(i%2 ==0) { populate+='\n<span> Even </span><br/>'; } else { populate+='\n<span> '+i+' </span><br/>'; } }parent_elem.innerHTML=populate;// using getElementsByTagName on pre populated spanvar parent_elem = document.getElementById("span_placement2");var populate = "";for(i=1;i<=10;i++) { populate+='\n<span> '+i+' </span><br/>'; } parent_elem.innerHTML=populate; span_childs = parent_elem.getElementsByTagName("span"); for(i=1;i<span_childs.length;i=i+2) { span_childs[i].innerHTML=" Even "; } }/*--*//*]]>*/</script><style type="text/css"></style></head><body><div id="span_placement"></div><hr /><div id="span_placement2"></div></body></html> Link to comment Share on other sites More sharing options...
tinfanide Posted May 12, 2011 Author Share Posted May 12, 2011 Span in the original post was a string not a DOM element. To create a DOM element in code you would do this-span = document.createElement("span");span.innerHTML = "even";document.appendChild(span); Can you please tell me where to add in my script?I'd tested them but it did not work. I think I put them in the wrong place.It not a good idea to use document.write it is very problematic.it would be best to write these into a parent container, and add 'even' to the span, as you loop through each even numbered loop.you can only really use getElementsByTagName on those elements that have already been created.below you will find both methods with and without getElementsByTagName.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/window.onload=function(){var parent_elem = document.getElementById("span_placement");var populate = "";for(i=1;i<=10;i++) { if(i%2 ==0) { populate+='\n<span> Even </span><br/>'; } else { populate+='\n<span> '+i+' </span><br/>'; } }parent_elem.innerHTML=populate;// using getElementsByTagName on pre populated spanvar parent_elem = document.getElementById("span_placement2");var populate = "";for(i=1;i<=10;i++) { populate+='\n<span> '+i+' </span><br/>'; } parent_elem.innerHTML=populate; span_childs = parent_elem.getElementsByTagName("span"); for(i=1;i<span_childs.length;i=i+2) { span_childs[i].innerHTML=" Even "; } }/*--*//*]]>*/</script><style type="text/css"></style></head><body><div id="span_placement"></div><hr /><div id="span_placement2"></div></body></html> Yes, I see you base getElementsByTagName on a DOM element with an id. It seems that in js giving a html object an ID means converting it to a DOM object. A pure tag is not and we cannot style them. Link to comment Share on other sites More sharing options...
ShadowMage Posted May 12, 2011 Share Posted May 12, 2011 Can you please tell me where to add in my script?I\'d tested them but it did not work. I think I put them in the wrong place.Show us the code you tried.Yes, I see you base getElementsByTagName on a DOM element with an id. It seems that in js giving a html object an ID means converting it to a DOM object. A pure tag is not and we cannot style them.Giving an element an ID has nothing to do with it being "converted" to a DOM object. Every element is converted. Giving an ID to an element simply makes it easier to select the DOM element.EDIT: To illustrate,<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Selecting DOM</title><script type='text/javascript'>function turnRed() { var children = document.getElementsByTagName('div')[0].childNodes; var elem, elNum = 0, whichEl = 2; for (var x=0, e=children.length; x<e; x++) { elem = children[x]; if (elem.nodeType == 1) { elNum++; } if (elNum == whichEl) { break; } } elem.style.color = 'red';}</script></head><body><div> <span>Span One</span> <span>Span Two</span> <span>Span Three</span> <span>Span Four</span></div><button onclick='turnRed();'>Turn it red!</button></body></html> Link to comment Share on other sites More sharing options...
tinfanide Posted May 13, 2011 Author Share Posted May 13, 2011 <script> var i; span = document.createElement("span"); document.appendChild(span); for(i=1;i<=10;i++){ document.write("<span>" + "pt" + i + "</span>" + "<br />"); var span = "'<span>' + 'pt' + i + '</span>'"; if(i%2==0){ span.innerHTML = "even"; } } </script> This is the code I've tried. Link to comment Share on other sites More sharing options...
ShadowMage Posted May 13, 2011 Share Posted May 13, 2011 createElement and appendChild should replace the code you had before. Something like this: <script type='text/javascript'>var i, span;for (i=1; i<=10; i++) { span = document.createElement('span'); span.innerHTML = "pt"+i; if (i%2 == 0) { span.innerHTML += " even"; } document.appendChild(span); //This line appends the <br> tag after each span document.appendChild(document.createElement('br'));}</script> Link to comment Share on other sites More sharing options...
tinfanide Posted May 13, 2011 Author Share Posted May 13, 2011 Show us the code you tried.Giving an element an ID has nothing to do with it being "converted" to a DOM object. Every element is converted. Giving an ID to an element simply makes it easier to select the DOM element.EDIT: To illustrate,<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Selecting DOM</title><script type='text/javascript'>function turnRed() { var children = document.getElementsByTagName('div')[0].childNodes; var elem, elNum = 0, whichEl = 2; for (var x=0, e=children.length; x<e; x++) { elem = children[x]; if (elem.nodeType == 1) { elNum++; } if (elNum == whichEl) { break; } } elem.style.color = 'red';}</script></head><body><div> <span>Span One</span> <span>Span Two</span> <span>Span Three</span> <span>Span Four</span></div><button onclick='turnRed();'>Turn it red!</button></body></html> Still studying this one. A bit harder than some other. Link to comment Share on other sites More sharing options...
tinfanide Posted May 13, 2011 Author Share Posted May 13, 2011 createElement and appendChild should replace the code you had before. Something like this:<script type='text/javascript'>var i, span;for (i=1; i<=10; i++) { span = document.createElement('span'); span.innerHTML = "pt"+i; if (i%2 == 0) { span.innerHTML += " even"; } document.appendChild(span); //This line appends the <br> tag after each span document.appendChild(document.createElement('br'));}</script> Thanks for this sample codes.I see what appendChild and createElement mean now.Still drilling into childNodes.May test more and come back. Link to comment Share on other sites More sharing options...
tinfanide Posted May 15, 2011 Author Share Posted May 15, 2011 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><title>Selecting DOM</title><script type='text/javascript'>function turnRed() {var children = document.getElementsByTagName('div')[0].childNodes;var elem, elNum = 0, whichEl = 2;for (var x=0, e=children.length; x<e; x++) {elem = children[x];if (elem.nodeType == 1) {elNum++;}if (elNum == whichEl) {break;}}elem.style.color = 'red';}</script></head><body><div><span>Span One</span><span>Span Two</span><span>Span Three</span><span>Span Four</span></div><button onclick='turnRed();'>Turn it red!</button></body></html> Could you explain why elNum works well to represent the span elements? I didn't see elNum linked to the span elements.And,Why the whichEl starts from 1, not 0? Link to comment Share on other sites More sharing options...
ShadowMage Posted May 16, 2011 Share Posted May 16, 2011 Could you explain why elNum works well to represent the span elements? I didn't see elNum linked to the span elements.And,Why the whichEl starts from 1, not 0?childNodes returns an array of all the direct descendants of a node. Including text nodes. The line breaks in the HTML code create text nodes. Any other text not in a nested tag would also create a text node. So because childNodes returns the text nodes too, we need to test each node as we loop through them to see if it is an element node (ie, its nodeType is equal to 1). There are other types besides text and element, so that's why we check if it's an element.elNum doesn't really represent the span elements at all. It simply counts them (or any other element). If there were other tags (div, p, input, etc.) it would count those as well. Every time an element node is encountered elNum is incremented.whichEl is just which element we are trying to target. It starts at 1 because elNum starts at 0. If elNum is at 0, then no element tags have been found. If we're targeting the second element (ie, whichEl = 2) we'd have to wait until elNum is equal to 2. After the first element is found, elNum will be incremented to 1. After the second is found it will be incremented to 2.Hope that clears it up a little bit.Just remember, this was a simple example, meant to illustrate that the DOM elements are [i]always[/i] created whether an element has an id or not. It probably isn't really useful for much in the "real world". Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.