SitePoint Sponsor

User Tag List

Results 1 to 12 of 12

Thread: createElement

  1. #1
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    createElement

    How do I create elements either side of existing elements?
    Code:
    <div>
    <p>A short Sentance</p>
    </div>
    What I'd like to do is create another "<p></p>" before and after the current one, resulting in
    Code:
    <div>
    <p>Added sentance 0</p>
    <p>A short Sentance</p>
    <p>Added sentance 1</p>
    </div>
    Thanks
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  2. #2
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    do you mean you want them to sit next to each other in the layout?

    If that what you want I wouldnt even use the p tags ... Id do something like this:

    <div>
    <span>Added sentance 0</span>
    <span>A short Sentance</span>
    <span>Added sentance 1</span>
    </div>

    then you can manipulate the content of each span by adding a class or id to it and using CSS

  3. #3
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your suggestion, but I'd rather do it the way I've asked (if possible). I don't know the contents of sentance[0] or sentance[1] until the page has loaded. I'd rather use the p tag, there's no difference really apart from it looks cleaner.

    What I want in the code is just
    Code:
    <div>
    <p>A short Sentance</p>
    </div>
    . I dont want to use display or visibility, and the p's are already given sizes in my css. What I don't want is to start with 2 empty objects. I want to start with clean code, and put the new objects in when they are known.
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  4. #4
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How are you loading these p tags content (what lang that is) are you doing this in javascript? .. Im not sure we are on the same page here but it sounds like you could use a loop determining if the data is there and then write the p tags with the content in them .... basically youd have to reference the container and create a child element then add that sentances content to that child ... if your first one is alwasy there you would also have to account for that when creating the elements..

  5. #5
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Yeah, that's what I mean. The data is found onload, and what I want is to place the new data in the containing div. What I don't know is how to put one p before the existing and the other after. Can I do it without any changes to the current p? The first p is child[0], but I want that to become child[1] so I can add a new child[0], and then add child[2].
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  6. #6
    SitePoint Wizard gold trophysilver trophybronze trophy dc dalton's Avatar
    Join Date
    Nov 2004
    Location
    Right behind you, watching, always watching.
    Posts
    5,431
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ya know .. the heat must be getting to me today ... I would have sworn this was in the Gen Dev section, not the javascript section! (think I need a nap!)

    anyways have you looked at this:

    http://www.sitepoint.com/subcat/javascript

    It has some stuff for creating nodes

  7. #7
    SitePoint Wizard
    Join Date
    Mar 2001
    Posts
    3,537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    The childNodes[] array is readonly, so you can't try to add a new element directly to the childNodes[] array. What you are looking for is the insertBefore() method:
    Code:
    <body>
    <div>
    <p>A short Sentance</p>
    </div>
    Code:
    var body = document.getElementsByTagName("body")[0];
    bodynodes = body.childNodes;
    divnodes = bodynodes[0].childNodes;
    
    var newdiv = document.createElement("p");
    newdiv.setAttribute("id", "p1");
    
    bodynodes[0].insertBefore(newdiv, divnodes[0]);
    You can use appendChild() to append an element to the end of the <div>. With those two functions, you should be able to insert elements anywhere.

    Be aware that in FF1.0, if you have this html:
    Code:
    <div>
    <p>A short Sentance</p>
    </div>
    The firstChild of the <div> is not the <p> element. In FF, there is an invisible textNode containing the newline that is the firstChild. So, in order for your script to work crossbrowser, you either have to put all your html on one line, or use getElementsByTagName() on the <div> to get an array of just the <p> elements:

    var parray = bodynodes[0].getElementsbyTagName("p");
    Last edited by 7stud; Apr 20, 2005 at 17:54.

  8. #8
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks 7stud Havent tried it yet, but it looks good.
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  9. #9
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, there is "insertBefore" method in DOM, but no "insertAfter". However, it's very easy to implement:

    Code:
    function insertAdjacentElement(node, newNode, where) {
    	if(where == "before")
    		node.parentNode.insertBefore(newNode, node);
    	else if(node.nextSibling)
    		node.parentNode.insertBefore(newNode, node.nextSibling);
    	else
    		node.parentNode.appendChild(newNode);
    }
    An example how it works

    Code:
    <div id="foo">
    <p>hello</p>
    </div>
    <button onclick="test()">test</button>
    <script>
    function test() {
    	var foo = document.getElementById("foo");
    	var para = foo.getElementsByTagName("p")[0];
    	
    	var dBefore = document.createElement("DIV");
    	dBefore.appendChild(document.createTextNode("before"));
    	
    	insertAdjacentElement(para, dBefore, "before");
    
    	var dAfter = document.createElement("DIV");
    	dAfter.appendChild(document.createTextNode("after"));
    	
    	insertAdjacentElement(para, dAfter, "after");
    	
    	alert(foo.innerHTML)
    }
    </script>

  10. #10
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I like it Haven't tried it, but I can see what it's up too. nice
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  11. #11
    SitePoint Guru momos's Avatar
    Join Date
    Apr 2004
    Location
    Belgium
    Posts
    919
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by stereofrog
    Code:
     function insertAdjacentElement(node, newNode, where) {
     	if(where == "before")
     		node.parentNode.insertBefore(newNode, node);
     	else if(node.nextSibling)
     		node.parentNode.insertBefore(newNode, node.nextSibling);
     	else
     		node.parentNode.appendChild(newNode);
     }
    Why make it hard? node.parentNode.insertBefore(newNode, node.nextSibling); is sufficient!

  12. #12
    SitePoint Wizard stereofrog's Avatar
    Join Date
    Apr 2004
    Location
    germany
    Posts
    4,324
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the feedback


Bookmarks

Posting Permissions

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