一个html元素的克隆次数太多

Clone an html element one too many times

本文关键字：太多 html 元素 一个      更新时间：2023-09-26

我正试图在给定json响应的情况下，一到多次克隆HTML <select>下拉列表。

问题是，当我试图将克隆存储在变量中并在屏幕上显示时，我看到的只是以下内容：

[object Object]

我制作了一个简单的JSFIDDLE来帮助解释我的问题。

需要注意的事项：

选择下拉列表位于隐藏的分区中。

<div class="hidden">
    <select class="certList">
       .....
    </select>
</div>

我正在使用构建字符串

buildList += "<div....

然后，我使用jQuery append函数来附加我构建的列表。

$("#certRow").append(buildList);

最后，如果有什么建议可以让我更好地展示结果，我会洗耳恭听。我正在考虑使用无序列表，但不确定如何使用。

将html复制到附加字符串中：

"<div class='col-4'>"+certList[0].outerHTML+"</div></div>";

目前，您将字符串与jQuery对象（并且object.ToString()是[object Object]）

连接

将元素附加到div

    var certList = $(".certList").clone();
    var buildList = "";
      $.each(res.data, function(i, data) { 
        buildList += "<div class='ti-row'>"+
            "<div class='col-4 center'>"+data +"</div>"+
            "<div class='col-4 right'>Select Certs : </div>"+
            "<div class='col-4 addSelect'></div></div>";
        });
        var html = $(buildList);
        html.find(".addSelect").append(certList);    
        $("#certRow").append(html);

尝试使用outerHTML

var certList = $(".certList")[0].outerHTML;

更新的Fiddle

使用.pparent（）.html（）而不是.clone（）

clone返回对象，您不能将对象附加到字符串中，但html返回可以附加的字符串

相关文章：