JQuery creating HTML not working correctly

Question

I am trying to create HTML using JQuery. I have a JQuery script which creates a HTML table:

$('<table>').attr('cellspacing', '5').addClass('blocksTable')
        .append('<tbody><tr><td>Name</td>')
        .append('<td><input type="text" value="" name="textBlockNames" class="textField"/></td></tr>')

        .append('<tr><td>Locale</td>')
        .append('<td><input type="text" value="" name="textBlockLocales" class="textField"/></td></tr>')

        .append('<tr><td>Content</td>')
        .append('<td><input type="text" value="" name="textBlockContents" class="textField"/></td></tr></tbody>')

        .append('</table>')
        .appendTo($("#idParentBlocksTable"));

But the table is generated like this:

<table class="blocksTable" cellspacing="5">
    <tbody>
        <tr>
            <td>Name</td>
        </tr>
        <tr>
            <td>Locale</td>
        </tr>
        <tr>
            <td>Content</td>
        </tr>
    </tbody>
    <td>
        <input class="textField" type="text" name="textBlockNames" value="">
    </td>
    <td>
        <input class="textField" type="text" name="textBlockLocales" value="">
    </td>
    <td>
        <input class="textField" type="text" name="textBlockContents" value="">
    </td>
</table>

While it should be generated like this:

<table class="blocksTable" cellspacing="5">
    <tbody>
        <tr>
            <td> Name </td>
            <td>
                <input class="textField" type="text" name="textBlockNames" value="">
            </td>
        </tr>
        <tr>
            <td> Locale </td>
            <td>
                <input class="textField" type="text" name="textBlockLocales" value="">
            </td>
        </tr>
        <tr>
            <td> Content </td>
            <td>
                <input class="textField" type="text" name="textBlockContents" value="">
            </td>
        </tr>
    </tbody>
</table>

What I am doing wrong here? I don't know how more clearly explain the problem so I am typing anything here because the system doesn't allow me to submit the question.

You have to string all your HTML together into one value, then append it. — Ja͢ck
– Ja͢ck, Commented Nov 28, 2012 at 12:05

Denys Séguret · Accepted Answer · 2012-11-28 12:09:30Z

4

When you're calling

.append('<tbody><tr><td>Name</td>')

jQuery doesn't change the HTML source of the page but adds one (or more) DOM node(s). So the HTML is automatically fixed (here the row and cell are closed)

What you should do is build some HTML string and append it :

var html = '<tbody><tr><td>Name</td>'
html += '<td><input type="text" value="" name="tex"'...
...
html += '</tbody>';
$('<table>').attr('cellspacing', '5').addClass('blocksTable').append(html);

Note that appending elements to the DOM is costly. You should prefer building a large HTML string and append it once over appending many small elements.

edited Nov 28, 2012 at 12:09

answered Nov 28, 2012 at 12:02

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

undefined Over a year ago

But can you switch off this "fixing" functionality?

Denys Séguret Over a year ago

@xyu No, because jQuery changes the DOM, not the HTML source of the page.

Ja͢ck Over a year ago

@xyu internally it creates a document fragment, so it's not jquery that does the fixing, it's the browser.

painotpi · Accepted Answer · 2012-11-28 12:07:59Z

0

When you do a,

.append('<tbody><tr><td>Name</td>')

It gets appended to the table,

when you then do,

.append('<td><input type="text" value="" name="textBlockNames" class="textField"/></td></tr>')

It won't append to td as the context is still table,

What you can try to do is create all the html once and append it together.

answered Nov 28, 2012 at 12:07

painotpi

7,0122 gold badges40 silver badges72 bronze badges

Comments

FixMaker · Accepted Answer · 2012-11-28 12:08:15Z

0

The first two calls .append() append to the same element (i.e. the <table>). One way to get round this would be to create the <tbody> separately and then append to that:

var $body = $('<tbody></tbody>').appendTo($('<table>').attr('cellspacing', '5').addClass('blocksTable'));
$body
    .append('<tr><td>Name</td>')
    .append('<td><input type="text" value="" name="textBlockNames" class="textField"/></td></tr>')

    //...etc.

answered Nov 28, 2012 at 12:08

FixMaker

3,9284 gold badges32 silver badges48 bronze badges

Collectives™ on Stack Overflow

JQuery creating HTML not working correctly

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related