Question

<div id="container" class "container-class">
   <ul class="table-list">
     <li id="element1" class="listless">
        <div class="table-list-cell">
           <span class="labels">...</span>
               INSERT HTML HERE
           <div class="div">

我想在代码

中标记的位置插入标签

如何在Javascript中执行此操作？

我有一次在这里无效的尝试

function addLabel($label) {
  $('#container .table-list').append($label);
}

Answer 1

尝试使用Jquery .after，并更改选择器以在需要添加文本的位置之前找到最后一个对象（例如：.labels）

$('#container .table-list .labels').after('New Label Value');

JSFiddle

Answer 2

您可以使用jquery append（）函数来实现此目的。

$('#container .table-list .labels').append('New Label Value');

jsfiddle

Answer 3

你可以试试这个。只需获取插入数据后的.div，然后使用jquery .before在此.div之前插入内容。

function addLabel($label) {
  $('#element1 .div').before($label);
}

通过在div之前插入内容，将确保您插入的内容始终保持在您插入的顺序中。

您可以将jquery .after与.labels一起使用，但它会反转您要插入的内容顺序。

Answer 4

在您的示例中，您附加了标签$label。您的示例提示您在行INSERT HTML HERE之前有一个包含标签<span class="labels">...</span>的范围。所以也许只需要将追加到你的html中的现有标签列表中。

您的选择器略有变化，以包含.labels

$('#container .table-list .labels').append($label);

替代方案包括使用.after()，.before()，但其他人已经为这些提供了答案。

就我个人而言，我认为你应该引入一个容器，这样你就可以明确地附加在正确的地方。

<span class="labels">...</span> <div id="append-container"></div>  <div class="div">– $('#append-container').append($label);

大多数允许开发人员定义区域/容器的视图合成工作的UI框架应该添加子视图/组件。

在任何情况下，与使用.after()和.before()的解决方案不同，如果您更改html以便之后和的选择器不会中断之前解决方案没有长期匹配。您必须更新选择器以镜像更改（假设您记得检查javascript - 可能不会出现下一个开发人员。）

Answer 5

jQuery ：

function addLabel($label) {
    $('.table-list .labels').append($label);
}

或者，如果你想要一些速度，你可以随时使用纯JavaScript：

<强>的Javascript ：

function addLabel(label) {
    var list = document.querySelectorAll('.table-list .labels');
    [].forEach.call(list, function(element) {
        element.appendChild(label);
    });
}

Answer 6

jQuery＆＃39; .after()就是您正在寻找的。

如果你想要的是插入<label/>元素，你可以使用$('<label/>') （documentation）来创建它。

这是一个完整的例子：

function addLabel(content) {
    var label = $('<label/>').text(content);
    $('#container .table-list-cell .labels').after(label);
}

addLabel('label text');

在 JSFiddle 上查看。

注意：顺便说一下，你忘了#container类属性上的等号。

使用Javascript进行HTML插入

6 个答案: