如何使用 jQuery 动态添加标签？

Question

我根本不知道如何使用 jQuery，我真的需要一些帮助。 这是我正在尝试做的...

我需要在那些没有对 HTML 中的文本进行任何硬编码的标签旁边添加这些标签。 我对 jQuery 很陌生，真的很想得到一些帮助。

HTML

jQuery（这是来自教程）

 $("document").ready(function(){
 $("body").append("<p>JSQuery Hello World");
 });



window.addEventListener("DOMContentLoaded", function(evt) {
var elem = document.getElementsByTagName("body")[0];
var para = document.createElement("p");
var text = document.createTextNode("This is regular JS");
para.appendChild(text);
elem.appendChild(para);
});

Answer 1

解决方案代码

<script src="your jquery src"></script>
<ul id="productList">
    <li data-type="family">Coffee</li>
    <li data-type="child">Tea</li>
    <li data-type="family">Milk</li>
    <li data-type="child">Milk</li>
    <li data-type="family">Milk</li>
</ul>
<script>
    $(document).ready(function () {
        var listItems = $("#productList li");
        listItems.each(function (idx, li) {
            var product = $(li);
            product.append(" - <b> ("+product.attr('data-type')+") </b>");
            // and the rest of your code
        });
    });
</script>

解释和逻辑：

1. 在#productlist识别li并将其存储在listItems 中
2. 通过每个循环遍历每个 listItems 元素
3. 在此处称为product DOM 元素中，使用 jquery append()函数append() data 属性的值

请注意：如果没有定义数据属性，将打印 undefined 而不是 value。 要解决此错误，您可以在每个循环中添加一个 if 条件，然后追加。