javascript - JQuery 创建 HTML 无法正常工作

Question

我正在尝试使用 JQuery 创建 HTML。我有一个 JQuery 脚本，它创建一个 HTML 表:

$('<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"));

但是表格是这样生成的:

<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>

虽然它应该像这样生成:

<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>

我在这里做错了什么？我不知道如何更清楚地解释这个问题，所以我在这里输入任何内容，因为系统不允许我提交问题。

Answer 1

当你打电话时

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

jQuery 不会更改页面的 HTML 源代码，而是添加一个(或多个)DOM 节点。所以HTML会自动固定(这里行和单元格是关闭的)

您应该做的是构建一些 HTML 字符串并附加它:

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);

请注意，向 DOM 追加元素的成本很高。您应该更喜欢构建一个大的 HTML 字符串并将其附加一次，而不是附加许多小元素。