Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,678
    Thanks
    6
    Thanked 1,009 Times in 982 Posts

    appendChild not appending child properly

    I have a definition list and was gonna make the items display in a line with an equal sign between each related definition term and desciption pair:

    Code:
    		<div id="info">
    			<h2>&ldquo;Animals&rdquo;</h2>
    			<div>
    				<h3>Key</h3>
    				<dl>
    					<dt>RF</dt>
    					<dd>Royalty Free</dd>
    					<dt>RM</dt>
    					<dd>Rights Managed</dd>
    					<dt>P</dt>
    					<dd>Suitable for print use</dd>
    					<dt>W</dt>
    					<dd>Suitable for web use</dd>
    				</dl>
    			</div>
                            …
                            …
    It’s supposed to look like:
    Code:
    RF = Royalty Free    RM = Rights Managed    P = Suitable for print use    W = Suitable for web use
    It all works nicely with the :after CSS pseudo class but as the experienced web developers will know this ain’t workin’ in IE for which I wanted to resort to JS. No big thing so far but for some reason that I can’t figure out my for loop isn’t applying the text node to all items, only to the last one:

    Code:
    function nodes() {
    	if(getEl('info')) {
    		var colon = document.createTextNode(':');
    		getEl('info').getElementsByTagName('h3')[0].appendChild(colon);
    		
    		var equal = document.createTextNode(' = ');
    		var dt = getEl('info').getElementsByTagName('dt');
    		for(i=0; i<dt.length; i++) {
    			dt[i].appendChild(equal);
    		}
    	}
    }
    getEl() is a shortcut function for document.getElementById() by the way.

    What did I do wrong and how to correct it?

  • #2
    Master Coder
    Join Date
    Feb 2003
    Location
    Umeå, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    Quote Originally Posted by VIPStephan View Post
    It all works nicely with the :after CSS pseudo class but as the experienced web developers will know this ain’t workin’ in IE for which I wanted to resort to JS. No big thing so far but for some reason that I can’t figure out my for loop isn’t applying the text node to all items, only to the last one:
    Actually it's appending it to each of them, but since you are appending *the same* node, it has to be removed from it's present parent in order to be given a new parent, each iteration through the loop.
    What did I do wrong and how to correct it?
    Clone it each time through the loop.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #3
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by VIPStephan View Post
    Code:
    function nodes() {
    	if(getEl('info')) {
    		var colon = document.createTextNode(':');
    		getEl('info').getElementsByTagName('h3')[0].appendChild(colon);
    		
    		var equal = document.createTextNode(' = ');
    		var dt = getEl('info').getElementsByTagName('dt');
    		for(i=0; i<dt.length; i++) {
    			dt[i].appendChild(equal);
    		}
    	}
    }
    getEl() is a shortcut function for document.getElementById() by the way.

    What did I do wrong and how to correct it?
    appendChild:

    http://www.javascriptkit.com/domref/...tmethods.shtml

    Inserts the specified node at the end of the current node object. A frequently used method for dynamically appending a new element or text to the document
    I thing that you must use replaceChild(newChild, oldChild) after you get the content of the old node and concatenate '='.

    Sorry, I have a little experience with js with dom therefor I don't provide some code. But I'm sure you don't need,

    regards
    Last edited by oesxyl; 05-13-2008 at 01:10 AM.

  • #4
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by VIPStephan View Post
    […] how to correct it?
    Solution 1
    This involves creating a new text node on each loop iteration. This is the method that I prefer, personally.

    Code:
    var d = document;
    function nodes() {
    	if(getEl("info")) {
    		getEl("info').getElementsByTagName("h3").item(0).appendChild(d.createTextNode(":"));
    		for (var i = 0; i < dt.length; i++) {
    			getEl("info").getElementsByTagName("dt").item(i).appendChild(d.createTextNode(" = "));
    		}
    	}
    }
    Solution 2
    This involves cloning an existing node on each loop iteration as liorean proposed.

    Code:
    var d = document;
    function nodes() {
    	if(getEl("info")) {
    		getEl("info').getElementsByTagName("h3").item(0).appendChild(d.createTextNode(":"));
    		var equal = d.createTextNode(" = ");
    		for (var i = 0; i < dt.length; i++) {
    			getEl("info").getElementsByTagName("dt").appendChild(equal.cloneNode(false));
    		}
    	}
    }
    Solution 3
    This involves concatenating the new text with the existing text of a text node. No new nodes need to be created. Note that this code will only work if the last node in the dt element is a text node. This solution is a simplified version of what oesxyl proposed doing.

    Code:
    var d = document;
    function nodes() {
    	if(getEl("info")) {
    		getEl("info').getElementsByTagName("h3").item(0).appendChild(d.createTextNode(":"));
    		for (var i = 0; i < dt.length; i++) {
    			getEl("info").getElementsByTagName("dt").item(i).lastChild.data += " = ";
    		}
    	}
    }
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • Users who have thanked Arbitrator for this post:

    VIPStephan (05-13-2008)

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Do I miss something, or you may simply concatenate the textNode value?:
    Code:
    function nodes() {
    	if(e=getEl('info')) {
    	e.getElementsByTagName('h3')[0].firstChild.nodeValue+=':';
    	var dt = e.getElementsByTagName('dt'), i=0, d;
    		while(d=dt[i++]){
    		d.firstChild.nodeValue+=' = ';
    		}
    	}
    }
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,678
    Thanks
    6
    Thanked 1,009 Times in 982 Posts
    Awesome! Thank you guys… I learn something new every day.

    I went with Arbitrator’s solution 1 as it appeared most easily understandable by me and it’s actually so simple that I should have thought of that way myself.

  • #7
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by Kor View Post
    Do I miss something, or you may simply concatenate the textNode value?
    Yeah, I did that in Solution 3. I believe that your way is more efficient, but it’s also more confusing IMO.
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Posting Permissions

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