Appending an HTML string to a DOM element.

Discussion in 'Javascript' started by Daz, Dec 19, 2006.

  1. Daz

    Daz Guest

    Hi everyone!

    Is it possible to take a line of text like so:

    <tr><td>title1</td><td>title2</td><td>title3</td><td>title4</td></tr>

    And append it to a DOM node such as this:

    var nodeToAppendTo = document.getElementById('tbody');

    I have tried using innerHTML, but I think I am misusing it, as it only
    seems to append the text, and not the HTML elements.

    Many thanks.

    Daz.
     
    Daz, Dec 19, 2006
    #1
    1. Advertising

  2. Daz

    pcx99 Guest

    Daz wrote:
    > Hi everyone!
    >
    > Is it possible to take a line of text like so:
    >
    > <tr><td>title1</td><td>title2</td><td>title3</td><td>title4</td></tr>
    >
    > And append it to a DOM node such as this:
    >
    > var nodeToAppendTo = document.getElementById('tbody');
    >
    > I have tried using innerHTML, but I think I am misusing it, as it only
    > seems to append the text, and not the HTML elements.
    >
    > Many thanks.
    >
    > Daz.


    I added a division tag (just to make sure you actually have one) and I
    added <table></table> tags to your "line of text" because the stuff you
    inject into your page still has to be valid html which means if you're
    going to insert table elements you need to have the table declaration.


    <div id='tbody'></div>

    <script src='text/javascript'>

    var someString =
    '<table><tr><td>title1</td><td>title2</td><td>title3</td><td>title4</td></tr></table>';
    var nodeToAppendTo = document.getElementById('tbody');
    nodeToAppendTo.innerHTML = someString;

    // or just

    document.getElementById('tbody').innerHTML = someString;
    </script>


    Hope that helps you out a bit.

    --
    http://www.hunlock.com -- Musings in Javascript, CSS.
    $FA
     
    pcx99, Dec 19, 2006
    #2
    1. Advertising

  3. Daz

    RobG Guest

    Daz wrote:
    > Hi everyone!
    >
    > Is it possible to take a line of text like so:
    >
    > <tr><td>title1</td><td>title2</td><td>title3</td><td>title4</td></tr>
    >
    > And append it to a DOM node such as this:
    >
    > var nodeToAppendTo = document.getElementById('tbody');


    Possible, yes, but you will not get correct results in all browsers.
    IE in particular does not like you modifying tables using innerHTML.

    <URL:
    http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/innerhtml.asp
    >


    Use DOM methods. An alternative, if you know you are adding table row
    elements, is to add HTML to the string to make it a full table, add the
    HTML to a temporary element using innerHTML, then extract the bits you
    want.

    Untested code:

    function addTableRowsByInnerHTML (id, rowHTML)
    {
    var tableHTML = '<table>' + rowHTML + '</table>';
    var tempEl = document.createElement('div');
    document.body.appendChild(tempEl);
    tempEl.innerHTML = tableHTML;
    var newRows = tempEl.getElementsByTagName('tr');
    var table = document.body.appendChild(id);

    for (var i=0, len=newRows.length; i<len; i++){
    table.appendChild(newRows);
    }

    document.body.removeChild(tempEl);
    }

    However, DOM methods are better. Consider using the widely supported
    DOM insertRow and insertCell methods.

    insertRow:
    <URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39872903 >

    insertCell:
    <URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-68927016 >

    > I have tried using innerHTML, but I think I am misusing it, as it only
    > seems to append the text, and not the HTML elements.


    Yes, you're missusing it.

    --
    Rob
     
    RobG, Dec 19, 2006
    #3
  4. Daz

    Daz Guest

    RobG wrote:

    > Daz wrote:
    > > Hi everyone!
    > >
    > > Is it possible to take a line of text like so:
    > >
    > > <tr><td>title1</td><td>title2</td><td>title3</td><td>title4</td></tr>
    > >
    > > And append it to a DOM node such as this:
    > >
    > > var nodeToAppendTo = document.getElementById('tbody');

    >
    > Possible, yes, but you will not get correct results in all browsers.
    > IE in particular does not like you modifying tables using innerHTML.
    >
    > <URL:
    > http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/innerhtml.asp
    > >

    >
    > Use DOM methods. An alternative, if you know you are adding table row
    > elements, is to add HTML to the string to make it a full table, add the
    > HTML to a temporary element using innerHTML, then extract the bits you
    > want.
    >
    > Untested code:
    >
    > function addTableRowsByInnerHTML (id, rowHTML)
    > {
    > var tableHTML = '<table>' + rowHTML + '</table>';
    > var tempEl = document.createElement('div');
    > document.body.appendChild(tempEl);
    > tempEl.innerHTML = tableHTML;
    > var newRows = tempEl.getElementsByTagName('tr');
    > var table = document.body.appendChild(id);
    >
    > for (var i=0, len=newRows.length; i<len; i++){
    > table.appendChild(newRows);
    > }
    >
    > document.body.removeChild(tempEl);
    > }
    >
    > However, DOM methods are better. Consider using the widely supported
    > DOM insertRow and insertCell methods.
    >
    > insertRow:
    > <URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39872903 >
    >
    > insertCell:
    > <URL: http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-68927016 >
    >
    > > I have tried using innerHTML, but I think I am misusing it, as it only
    > > seems to append the text, and not the HTML elements.

    >
    > Yes, you're missusing it.
    >
    > --
    > Rob


    Hi Rob.

    I am developing an XPI for firefox, so cross-browser compatibility
    shouldn't be an issue. Perhaps I should have mentioned that, but at the
    time I felt that it was off-topic, and of no relevance to my query.

    I can't seem to get my head around why using innerHTML will work for a
    <div> but not for a <tbody>. Why does using a temporary element make a
    difference? Do <div> elements have some kind of magical power over
    other elements. I have to admit, that I generally don't use <div>
    elements as much as I should, as I tend to do most of the formatting
    using tables, and never really felt that <div> elements would benefit
    me at all.

    Thanks for your reply.

    Daz.
     
    Daz, Dec 19, 2006
    #4
  5. Daz

    RobG Guest

    Daz wrote:
    > RobG wrote:
    >
    > > Daz wrote:
    > > > Hi everyone!
    > > >
    > > > Is it possible to take a line of text like so:
    > > >
    > > > <tr><td>title1</td><td>title2</td><td>title3</td><td>title4</td></tr>
    > > >
    > > > And append it to a DOM node such as this:
    > > >
    > > > var nodeToAppendTo = document.getElementById('tbody');

    > >
    > > Possible, yes, but you will not get correct results in all browsers.
    > > IE in particular does not like you modifying tables using innerHTML.

    [...]
    > I am developing an XPI for firefox, so cross-browser compatibility
    > shouldn't be an issue. Perhaps I should have mentioned that, but at the
    > time I felt that it was off-topic, and of no relevance to my query.


    Play with the following:

    <button onclick="
    document.getElementById('xx').innerHTML =
    '<tr><td>new cell 0<td><td>new cell 1';
    ">Replace using innerHTML</button>
    <button onclick="
    document.getElementById('xx').innerHTML +=
    '<tr><td>new cell 0<td><td>new cell 1';
    ">Append using innerHTML</button>
    <table id="xx">
    <tr><td>cell 0<td>cell 1
    </table>


    > I can't seem to get my head around why using innerHTML will work for a
    > <div> but not for a <tbody>.


    There is nothing special about a div with regard to innerHTML, however
    IE has issues with innerHTML and tables if you replace only part of the
    table.

    > Why does using a temporary element make a
    > difference?


    That was suggested to allow a table to be added using innerHTML in way
    that works in IE.

    > Do <div> elements have some kind of magical power over
    > other elements. I have to admit, that I generally don't use <div>
    > elements as much as I should, as I tend to do most of the formatting
    > using tables, and never really felt that <div> elements would benefit
    > me at all.


    Then you should learn more about using CSS, divs and spans for layout
    rather than tables. Some will pursue the topic with religious fervour,
    it's more appropriate to discuss it in
    comp.infosystems.www.authoring.html or stylesheets.

    An example:

    <URL:
    http://tjkdesign.com/articles/one_html_markup_many_css_layouts.asp >

    --
    Rob
     
    RobG, Dec 19, 2006
    #5
  6. Daz

    Daz Guest

    RobG wrote:

    > Daz wrote:
    > > RobG wrote:
    > >
    > > > Daz wrote:
    > > > > Hi everyone!
    > > > >
    > > > > Is it possible to take a line of text like so:
    > > > >
    > > > > <tr><td>title1</td><td>title2</td><td>title3</td><td>title4</td></tr>
    > > > >
    > > > > And append it to a DOM node such as this:
    > > > >
    > > > > var nodeToAppendTo = document.getElementById('tbody');
    > > >
    > > > Possible, yes, but you will not get correct results in all browsers.
    > > > IE in particular does not like you modifying tables using innerHTML.

    > [...]
    > > I am developing an XPI for firefox, so cross-browser compatibility
    > > shouldn't be an issue. Perhaps I should have mentioned that, but at the
    > > time I felt that it was off-topic, and of no relevance to my query.

    >
    > Play with the following:
    >
    > <button onclick="
    > document.getElementById('xx').innerHTML =
    > '<tr><td>new cell 0<td><td>new cell 1';
    > ">Replace using innerHTML</button>
    > <button onclick="
    > document.getElementById('xx').innerHTML +=
    > '<tr><td>new cell 0<td><td>new cell 1';
    > ">Append using innerHTML</button>
    > <table id="xx">
    > <tr><td>cell 0<td>cell 1
    > </table>
    >
    >
    > > I can't seem to get my head around why using innerHTML will work for a
    > > <div> but not for a <tbody>.

    >
    > There is nothing special about a div with regard to innerHTML, however
    > IE has issues with innerHTML and tables if you replace only part of the
    > table.
    >
    > > Why does using a temporary element make a
    > > difference?

    >
    > That was suggested to allow a table to be added using innerHTML in way
    > that works in IE.
    >
    > > Do <div> elements have some kind of magical power over
    > > other elements. I have to admit, that I generally don't use <div>
    > > elements as much as I should, as I tend to do most of the formatting
    > > using tables, and never really felt that <div> elements would benefit
    > > me at all.

    >
    > Then you should learn more about using CSS, divs and spans for layout
    > rather than tables. Some will pursue the topic with religious fervour,
    > it's more appropriate to discuss it in
    > comp.infosystems.www.authoring.html or stylesheets.
    >
    > An example:
    >
    > <URL:
    > http://tjkdesign.com/articles/one_html_markup_many_css_layouts.asp >
    >
    > --
    > Rob


    Thanks for that Rob, you're an absolute star! That tiny piece of code
    has made me realise so much more about the DOM than I did before.

    I am not bashing the way your code is written, however, I was under the
    impression that all tags needed to be closed. Can you advise on whether
    it's actually a bad habit, or whether actually it's acceptable to do? I
    think it could save a substantial amount of code being sent to the
    browser, but I have never seen it before (apart from in my own code
    when I forget to close a tag).
    Would you actually write code like that for a website, or is it
    something you do when your playing with code?
    Are there any browsers that wouldn't be able to interpret that code
    properly? (Apart from ancient browsers).
    Is that how javascript would append elements to the DOM? (Or would it
    do that on some browsers, but not all).

    All the best, and many thanks for your assistance. :)

    Daz.
     
    Daz, Dec 21, 2006
    #6
  7. Daz

    Daz Guest

    RobG wrote:

    > Daz wrote:
    > > RobG wrote:
    > >
    > > > Daz wrote:
    > > > > Hi everyone!
    > > > >
    > > > > Is it possible to take a line of text like so:
    > > > >
    > > > > <tr><td>title1</td><td>title2</td><td>title3</td><td>title4</td></tr>
    > > > >
    > > > > And append it to a DOM node such as this:
    > > > >
    > > > > var nodeToAppendTo = document.getElementById('tbody');
    > > >
    > > > Possible, yes, but you will not get correct results in all browsers.
    > > > IE in particular does not like you modifying tables using innerHTML.

    > [...]
    > > I am developing an XPI for firefox, so cross-browser compatibility
    > > shouldn't be an issue. Perhaps I should have mentioned that, but at the
    > > time I felt that it was off-topic, and of no relevance to my query.

    >
    > Play with the following:
    >
    > <button onclick="
    > document.getElementById('xx').innerHTML =
    > '<tr><td>new cell 0<td><td>new cell 1';
    > ">Replace using innerHTML</button>
    > <button onclick="
    > document.getElementById('xx').innerHTML +=
    > '<tr><td>new cell 0<td><td>new cell 1';
    > ">Append using innerHTML</button>
    > <table id="xx">
    > <tr><td>cell 0<td>cell 1
    > </table>
    >
    >
    > > I can't seem to get my head around why using innerHTML will work for a
    > > <div> but not for a <tbody>.

    >
    > There is nothing special about a div with regard to innerHTML, however
    > IE has issues with innerHTML and tables if you replace only part of the
    > table.
    >
    > > Why does using a temporary element make a
    > > difference?

    >
    > That was suggested to allow a table to be added using innerHTML in way
    > that works in IE.
    >
    > > Do <div> elements have some kind of magical power over
    > > other elements. I have to admit, that I generally don't use <div>
    > > elements as much as I should, as I tend to do most of the formatting
    > > using tables, and never really felt that <div> elements would benefit
    > > me at all.

    >
    > Then you should learn more about using CSS, divs and spans for layout
    > rather than tables. Some will pursue the topic with religious fervour,
    > it's more appropriate to discuss it in
    > comp.infosystems.www.authoring.html or stylesheets.
    >
    > An example:
    >
    > <URL:
    > http://tjkdesign.com/articles/one_html_markup_many_css_layouts.asp >
    >
    > --
    > Rob


    Hello again. I have also discovered where I was going wrong. After
    comparing your cide to mine, I could still see no reason why it wasn't
    working. Here's a snippet from my code:

    function test()
    {
    var testAnimal = new aacres_animal("43234");
    var table = document.createElement('table');
    var tbody = document.createElement('tbody');
    tbody.innerHTML = '<tr>'
    +'<td>Animal Name</td>'
    +'<td>Animal Type</td>'
    +'<td>Discipline</td>'
    +'<td>Discipline<br />Level</td>'
    +'<td>Competitions<br />Entered</td>'
    +'</tr>';
    table.appendChild(tbody);
    table.border = '1';
    var newwin = window.open("","", 'height=400, width=400,
    titlebar=yes, toolbar=yes');
    newwin.document.body.appendChild(table);
    tbody.appendChild(testAnimal.mainTR);
    }

    Now for some reason, this code was not working. After having a play
    around with it, I discovered that by appending the tbody to the table,
    and THEN using innerHTML to append my 'string of code' to the tbody...
    It worked!

    So here's the resulting code:

    function test()
    {
    var testAnimal = new aacres_animal("43234");
    var table = document.createElement('table');
    var tbody = document.createElement('tbody');
    table.appendChild(tbody);
    tbody.innerHTML = '<tr>'
    +'<td>Animal Name</td>'
    +'<td>Animal Type</td>'
    +'<td>Discipline</td>'
    +'<td>Discipline<br />Level</td>'
    +'<td>Competitions<br />Entered</td>'
    +'</tr>';
    table.border = '1';
    var newwin = window.open("","", 'height=400, width=400,
    titlebar=yes, toolbar=yes');
    newwin.document.body.appendChild(table);
    tbody.appendChild(testAnimal.mainTR);
    }

    Note that the only thing different is the point at which I append the
    tbody, which for some reason has to be 'after' I have appended the
    tbody to the table.

    Thanks again for all of your help. :)

    Daz.
     
    Daz, Dec 21, 2006
    #7
  8. Daz

    RobG Guest

    Daz wrote:
    > RobG wrote:

    [...]
    > > Play with the following:
    > >
    > > <button onclick="
    > > document.getElementById('xx').innerHTML =
    > > '<tr><td>new cell 0<td><td>new cell 1';
    > > ">Replace using innerHTML</button>
    > > <button onclick="
    > > document.getElementById('xx').innerHTML +=
    > > '<tr><td>new cell 0<td><td>new cell 1';
    > > ">Append using innerHTML</button>
    > > <table id="xx">
    > > <tr><td>cell 0<td>cell 1
    > > </table>

    [...]
    > I am not bashing the way your code is written, however, I was under the
    > impression that all tags needed to be closed. Can you advise on whether
    > it's actually a bad habit, or whether actually it's acceptable to do?


    Closing tags for td and tr elements are optional.

    <URL: http://www.w3.org/TR/html4/struct/tables.html#edef-TD >
    <URL: http://www.w3.org/TR/html4/struct/tables.html#edef-TR >


    > I
    > think it could save a substantial amount of code being sent to the
    > browser, but I have never seen it before (apart from in my own code
    > when I forget to close a tag).
    > Would you actually write code like that for a website, or is it
    > something you do when your playing with code?


    Just for play, I think it is better to close tags for real work.


    > Are there any browsers that wouldn't be able to interpret that code
    > properly? (Apart from ancient browsers).


    Any HTML 4 compliant browser should be OK with it. If not, it's a
    browser bug.

    > Is that how javascript would append elements to the DOM? (Or would it
    > do that on some browsers, but not all).


    The DOM is independent of the markup. HTML is just a language that
    tells the browser how to build a DOM. Once the DOM is built, the
    browser has no further use for the source markup. When converting from
    DOM to HTML (say when getting the innerHTML of an element) the browser
    may or may not decide to include optional tags - though most seem to as
    it is probably simpler to include them rather than decide which ones to
    omit.


    --
    Rob
     
    RobG, Dec 21, 2006
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Tom
    Replies:
    7
    Views:
    450
    William Desrochers
    Sep 9, 2004
  2. Replies:
    0
    Views:
    575
  3. Ron Adam

    Appending Elements in Element Tree

    Ron Adam, Apr 8, 2006, in forum: Python
    Replies:
    1
    Views:
    324
    Ron Adam
    Apr 8, 2006
  4. Replies:
    8
    Views:
    473
  5. ted benedict
    Replies:
    3
    Views:
    156
Loading...

Share This Page