javascript - jquery创建没有结束标签的元素

Question

在我的用例中，我需要使用 jquery 动态构建一些 HTML。

我从这个函数开始:

function createSection(divName) {
    $("#"+ divName).append("<section id='team' class='pb-5'>\
        <div class='container'>");    
}

然后我继续这个函数:

function createRow(divName) {
     $("#"+ divName).append("<div class='row'>");
}

然后在我想关闭该部分的行之前添加一些其他元素，如下所示:

    function closeRow(divName) {
    $("#"+ divName).append("</div>");
}   

function closeSection(divName) {
    $("#"+ divName).append("</div></section>");
}     

但是，Jquery 似乎自己添加了结束标记。这弄乱了我的代码。

我得到这个 html:

<section id="team" class="pb-5">
        <div class="container">
        </div>   </section>

在我的第一个函数 createSection 执行后。 我怎样才能避免这种情况？

Answer 1

元素没有标签。它们本身就是完整的对象。

标签用于在 HTML 中创建元素。

jQuery 允许您使用 HTML 语法来创建元素，但这只是一种抽象。 jQuery 不会在内存中保留 HTML 字符串并允许您修改它。它正在处理整个元素。

如果你想处理一串 HTML，那么你需要处理一个字符串而不是 jQuery。

不过最好还是使用元素。使用 $() 而不是 append() 创建 div。添加 child 。将其附加到父元素。

function createRow(divName) {
     var row = $("<div />");
     row.addClass("row");
     $("#"+ divName).append(div);
     return row;
}