Results 1 to 4 of 4

Thread: DOM to create <p> and <span> tags

  1. #1
    Join Date
    Apr 2009
    Location
    Sydney, Australia
    Posts
    118
    Thanks
    16
    Thanked 1 Time in 1 Post

    Default DOM to create <p> and <span> tags

    I'm hoping someone can help the brain freeze I've had in the past couple of hours. I am using the below code to create a text node and a span element.

    Code:
    onload=function(){
    var root = document.getElementById('zonediv');
    for(var i=0;i<D.length;i++){
    root.appendChild(document.createTextNode(D[i][0]+' '))
    var sp= document.createElement('span');
    sp.appendChild(document.createTextNode(' '));
    root.appendChild(sp);root.appendChild(document.createElement('br'))
    }
    I can't really style a text element directly inside a DIV without some kind of mark-up so I am trying to make the DOM create nodes in this order

    Code:
    <div id="zonediv"> // parent
    <p> // need to replace text node with p element
    <span>
    <br>
    I know it's probably easy, my brain just won't register at this time of night... so thanks in advance.

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Code:
    var parentEl = document.getElementById("zonediv);
    var pEl = document.createElement("p");
    var spanEl = document.createElement("span");
    var brEl = document.createElement("br");
    
    spanEl.appendChild(brEl);
    pEl.appendChild(spanEl);
    parentEl.appendChild(pEl);
    Is this what you mean?
    Jeremy | jfein.net

  3. The Following User Says Thank You to Nile For This Useful Post:

    sniperman (02-11-2011)

  4. #3
    Join Date
    Apr 2009
    Location
    Sydney, Australia
    Posts
    118
    Thanks
    16
    Thanked 1 Time in 1 Post

    Default

    Thanks, that was somewhat helpful.

    Your example gave me a chance to look up some tutorials because I needed the text nodes to appear inside the <p> tags. After some good sleep and a couple of steely minutes I came up with this workable solution.

    Code:
    onload=function(){
    var root = document.getElementById('zonediv');
    for(var i=0;i<D.length;i++){
    var p = document.createElement("p");
    p.appendChild(document.createTextNode(D[i][0]+' '))
    var sp= document.createElement('span');
    sp.appendChild(document.createTextNode(' '));
    root.appendChild(p);root.appendChild(sp);root.appendChild(document.createElement('br'))
    }
    I had to wrap the text around a paragraph node, and append it to the parent. DOM complexio.

  5. #4
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    No problem, I'm glad to help

    Here on DD, we like to keep things organized. In an effort to do so, you have the option to set a thread to resolved when an issue is fixed. To make the status of the thread resolved:
    1. Go to your first post
    2. Edit your first post
    3. Click "Go Advanced"
    4. In the dropdown next to the title, select "RESOLVED"
    Jeremy | jfein.net

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
  •