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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Nov 2002
    Posts
    672
    Thanks
    1
    Thanked 1 Time in 1 Post

    DOM - Create multiple elements?

    To use the DOM instead of writing innerHTML, is it possible to write an entire table using javascript in a much easier way than hundreds of lines of creating and appending each element and their content?

    Code:
    document.write('<table border="1"><tr><th>Heading</th></tr></table>')
    vs

    Code:
    A=document.createElement('table')
    A.setAttribute('border','1')
    
    B=document.createElement('tr')
    A.appendChild(B)
    
    C=document.createElement('th')
    B.appendChild(C)
    
    D=document.createTextNode('heading')
    C.appendChild(D)
    
    document.getElementsByTagName('body').item(0).appendChild(A)
    I'm not sure if this would be considered a fragment or if such a solution exists. But the tables I'm creating are fairly constant except for the content, and will be used several times on one page. My goal is to dynamically modify the looks of the user display area in a forum, viewing a thread (area showing username, posts, etc) but without using innerHTML (which I only recently realized was proprietary ). Is there a shortcut to accomplishing this using less script?

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    one way is to have a 'hidden' table

    clone that and insert when and where required

  • #3
    New Coder
    Join Date
    Feb 2005
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah for sure the appending approach looks ugly.

    Have a pre-made table hidden in a textarea or hidden field.

    Then just load it when you need it.

    Code:
    <textarea id="hiddenTable" style="display:none">
    
    ...table code...
    
    </textarea>
    Code:
    <script>
         var tableCode = document.getElementById("hiddenTable").value;
    </script>
    Asp.Net 1.1 - 20 hrs
    CSS 2.0 - 3 hrs
    XHTML 1.1 - 5hrs
    JavaScript - 5hrs
    Cross-Browser Compatibility - Priceless

  • #4
    Regular Coder martin_narg's Avatar
    Join Date
    Jul 2002
    Location
    Chamonix, France
    Posts
    600
    Thanks
    1
    Thanked 3 Times in 3 Posts
    The ever-informative quirksmode has some info on this:
    http://www.quirksmode.org/dom/innerhtml.html

    m_n
    "Cos it's strange isn't it. You stand in the middle of a library and go 'Aaaaaaaaaaaaaaaaggggggghhhhhhh!'
    and everybody just stares at you. But you do the same in an aeroplane, and everybody joins in."
    -Tommy Cooper


  •  

    Posting Permissions

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