在先前添加的元素之后插入新元素答案

【问题标题】：insert new element after previous added elements在先前添加的元素之后插入新元素
【发布时间】：2014-02-05 10:21:20
【问题描述】：

JavaScript

$(".display_box").on('click', function () {
    var name = $(this).attr("data-name");
    var x = document.getElementById('added-people').innerHTML;
    $("name").insertAfter(x);
});

HTML

<div id="added-people" 
    style="margin-left:1%;
           min-height:15px;
           width:71.7%;
           background:#f2f4f5;
           font-family: 'lucida grande',tahoma,verdana,arial,sans-serif;
           font-size: 9px;color: #212121;">
</div>

显示框是使用 while 循环生成的。因此，当单击显示框时，会获取其名称并显示在“添加的人员”div 中。我希望当再次单击显示框时，获取的名称应显示在前一个名称旁边，依此类推。

【问题讨论】：

代码末尾多了一对括号：});
您不能将 innerHTML 作为 DOM 对象引用到 insertAfter()。那需要一个对象。而且，您在这里将 jQuery 与 JavaScript 结合起来。
这么多不匹配的代码，从哪里开始。
@SetSailMedia: “您不能将 innerHTML 作为 DOM 对象引用到 insertAfter()。这需要一个对象。” insertAfter 接受字符串。看看API docs。 OP 没有正确使用它，但它确实接受了一个字符串。
好点！但是如果 innerHTML 包含一些标记，是的，那会起作用。如果 innerHTML 仅包含一些文本，则它不会作为 htmlString 传递

标签： javascript jquery html

【解决方案1】：

$(".display_box").on('click', function () {
    var name = $(this).data("name") // use .data() to grab data-name
    var x = $("#added-people") // $("#id") same as document.getElementById('id')
    x.append( '<span>' + name + '</span>' );
});

【讨论】：

为什么要添加span？ OP没有说他们需要它。此外，如果您不使用其特殊功能，则完全没有必要使用data。不过，+1 用于展示如何append。
如果您不了解 jQuery 的属性缓存机制的含义，使用 .data() 会让人感到困惑。
我添加了<span>，以便 OP 将来更容易操作这些添加的元素，而不是纯文本字符串。喜欢添加后删除，$("#added-people").on( "click", "span", function(){ $(this).remove(); });

【解决方案2】：

您可以使用 jquery Append 函数，它附加在文本的末尾，在您的情况下是 var x

【讨论】：