如何正确地将我的 HTML 代码附加到 div 中？

Question

我有一个问题，当我将一些元素（一个 table 有两个输入类型=文本和一个按钮）附加到 div 标签时，我的元素移动并进入错误的位置地方。我的代码：

<div id="tables"></div>
<script>
var HTML_new_group = '\
<h4>'+gpName+'</h4>\
<table border="1">\
    <thead>\
        <tr>\
            <td>option</td>\
            <td>value</td>\
        </tr>\
    </thead>\
    <tbody>\
        <tr>\
            <td><input type="text" class="np-gp-option" data-np-gp-option-id="'+gpId+'"></td>\
            <td><input type="text" class="np-gp-value" data-np-gp-value-id="'+gpId+'"></td>\
        </tr>\
        <input type="button" value="Add" class="np-gp-add" data-np-gp-add-id="'+gpId+'" />\
    </tbody>\
</table>';
$(HTML_new_group).appendTo("#tables");
</script>

Final code

Final view

如您所见，按钮位于 table

Answer 1

这是因为您在 table 中附加了一个输入，但没有为其指定 tr 和 td。查看您添加的最后一个输入。将其包装在 tr 和 td 中，它将附加在 table.

中

var HTML_new_group = '\
<h4>'+gpName+'</h4>\
<table border="1">\
    <thead>\
        <tr>\
            <td>option</td>\
            <td>value</td>\
        </tr>\
    </thead>\
    <tbody>\
        <tr>\
            <td><input type="text" class="np-gp-option" data-np-gp-option-id="'+gpId+'"></td>\
            <td><input type="text" class="np-gp-value" data-np-gp-value-id="'+gpId+'"></td>\
        </tr>\
        <tr><td><input type="button" value="Add" class="np-gp-add" data-np-gp-add-id="'+gpId+'" /></td></tr>\
    </tbody>\
</table>';

如何正确地将我的 HTML 代码附加到 div 中？

How to append my HTML code into div correctly?

html

jquery

append