首页 > 解决方案 > Jquery创建没有结束标签的元素

问题描述

在我的用例中,我需要使用 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执行之后。我怎样才能避免这种情况?

标签: javascriptjqueryhtmldom

解决方案


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

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

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

如果要处理 HTML 字符串,则需要处理字符串而不是 jQuery。

不过最好使用元素。$()用and not创建 div append()。将孩子添加到其中。将其附加到父元素。

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

推荐阅读