jquery append div inside div不会追加到末尾

Question

我正在尝试在网站上找到的示例，我想保留所有 section、div、table、thead、tbody 标记以用于格式化目的。当我单击添加链接时，它可以在包含<input type="text" name="names" value="1" /> 的旧<div> 之上添加包含<input type="text" name="names" value="2" /> 的新<div>。这不是我想要的，我想在旧的下面添加新的<div>。我知道这与嵌套选择器有关，但我不知道如何解决它。请帮忙，非常感谢。

<section class="">
    <div class="container">
        <form name="addname" action="" method="post">'
            <table>
                <thead>
                    <tr class="header">
                        <th>Name</th>
                    </tr>
                </thead>
                <tbody>
                    <div class="thewrapper">
                        <div>
                            <tr>
                                <td>
                                    <input type="text" name="names" value="1" />
                                </td>
                                <td><a href="javascript:void(0);" class="addbutton">Add</a></td>
                            </tr>
                        </div>
                </tbody>
            </table>
            <input type="submit" value="Submit" />
        </form>
        </div>
</section>
<script type="text/javascript">
    $(document).ready(function() {
        var maxrow = 10;
        var addButton = $('.addbutton');
        var wrapper = $('.thewrapper'); //Input field wrapper
        var field = '<div><tr><td><input type="text" name="names" value="2" /></td><td><a href="javascript:void(0);" class="removebutton" >Remove</a></td></tr></div>';
        var y = 1;
        $(addButton).click(function() {
            if (y < maxrow) {
                y++;
                $(wrapper).append(field);
            }
        });

    });
</script>

Answer 1

它不起作用的原因是div 不允许成为tbody 的子代。一些浏览器试图解决这个问题。在 jsfiddle 的 safari 中，它会将 wrapper div 移动到表格外部和上方，因此当您附加它时，它正在附加，但它附加到已移动到表格上方的 div 上。因此，为什么它看起来像它的前置。尝试这样的事情，这样你就有了合法的 HTML。删除包装器 DIV 和 tr 周围的 DIV 并仅附加到 tbody 而不使用任何 DIV。只需将tr 直接附加到tbody 即可。

小提琴：https://jsfiddle.net/yfhbe32s/

HTML

<section class="">
    <div class="container">
        <form name="addname" action="" method="post">'
            <table>
                <thead>
                    <tr class="header">
                        <th>Name</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input type="text" name="names" value="1" />
                        </td>
                        <td><a href="javascript:void(0);" class="addbutton">Add</a></td>
                    </tr>
                </tbody>
            </table>
            <input type="submit" value="Submit" />
        </form>
    </div>
</section>

JS：

$(document).ready(function() {
    var maxrow = 10;
    var addButton = $('.addbutton');
    var wrapper = $('tbody'); //Input field wrapper
    var field = '<tr><td><input type="text" name="names" value="2" /></td><td><a href="javascript:void(0);" class="removebutton" >Remove</a></td></tr>';
    var y = 1;
    $(addButton).click(function() {
        if (y < maxrow) {
            y++;
            $(wrapper).append(field);
        }
    });
});

编辑：无法真正看到您在评论中发布的内容，但请尝试删除。基本上它代表点击事件。我们将点击附加到文档，并说在某些时候会有一个类为removebutton 的元素，当点击它时，它应该使用定义的事件处理程序。委托事件非常适合在我们附加事件时可能存在或不存在于 DOM 中的动态元素。事件处理程序上下文（删除按钮）然后找到其最近的 tr 父级并删除它及其所有子级并更新计数器。

小提琴：https://jsfiddle.net/yfhbe32s/1/

$(document).ready(function() {
    var maxrow = 10;
    var addButton = $('.addbutton');
    var wrapper = $('tbody'); //Input field wrapper
    var field = '<tr><td><input type="text" name="names" value="2" /></td><td><a href="javascript:void(0);" class="removebutton" >Remove</a></td></tr>';
    var y = 1;
    $(addButton).click(function() {
        if (y < maxrow) {
            y++;
            $(wrapper).append(field);
        }
    });
    $(document).on('click', '.removebutton',
        function () {
            $(this).closest('tr').remove();
            y--;
        }
    );
});

Answer 2

你需要使用 jQuery 的appendTo()，而不是append()。阅读它here

.append() 和 .appendTo() 方法执行相同的任务。主要区别在于语法，内容和目标的位置。使用 .append()，方法前面的选择器表达式是插入内容的容器。另一方面，使用 .appendTo()，内容在方法之前，可以作为选择器表达式或动态创建的标记，然后插入到目标容器中。

请注意，我已经切换了您的变量

var maxrow = 10;
var addButton = $('.addbutton');
var wrapper = $('.thewrapper'); //Input field wrapper
var field = '<div><tr><td><input type="text" name="names" value="2" /></td><td><a href="javascript:void(0);" class="removebutton" >Remove</a></td></tr></div>';
var y = 1;
$(addButton).click(function() {
    if (y < maxrow) {
        y++;
        $(field).appendTo(wrapper);
    }
});

---

另请注意，您的表格 HTML 不正确。不允许（至少它无效）将其他元素放在 <tr> 和 <td> 之前。你真的应该像这样构造你的 HTML：

<tbody class="thewrapper">
    <tr>
         <td>
            <input type="text" name="names" value="1" />
         </td>
         <td><a href="javascript:void(0);" class="addbutton">Add</a></td>
    </tr>
</tbody>

然后在你的 jQuery 中：

var maxrow = 10;
var addButton = $('.addbutton');
var wrapper = $('.thewrapper'); //Input field wrapper
var field = '<tr><td><input type="text" name="names" value="2" /></td><td><a href="javascript:void(0);" class="removebutton" >Remove</a></td></tr>';
var y = 1;
$(addButton).click(function() {
    if (y < maxrow) {
        y++;
        $(wrapper).append(field);  // notice that I switched back
    }
});

这将采用 field 变量（现在以 <tr> 开头，而不是 <div>），并将 append 带到 <tbody> 元素。

请注意，当您为.removeButton 创建event 时（我猜这将删除该行），您需要使用jQuery 的on 事件，因为它是在document.ready 运行之后创建的.

Answer 3

div 不允许是 tbody 的子对象

    $(document).ready(function() {
    var maxrow = 10;
    var addButton = $('.addbutton');
    var wrapper = $('tbody'); //Input field wrapper
    var field = '<tr><td><input type="text" name="names" value="2" /></td><td><a href="javascript:void(0);" class="removebutton" >Remove</a></td></tr>';
    var y = 1;
    $(addButton).click(function() {
        if (y < maxrow) {
            y++;
            $(wrapper).append(field);
        }
    });

});