多次克隆一个 html 元素答案

【问题标题】：Clone an html element one too many times多次克隆一个 html 元素
【发布时间】：2023-04-04 21:10:02
【问题描述】：

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

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

[object Object]

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

注意事项：

选择下拉菜单位于隐藏的 div 中。

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

我正在构建一个字符串：

buildList += "<div....

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

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

最后，如果有任何关于如何更好地显示结果的提示，我会全力以赴。我正在考虑使用无序列表，但不知道该怎么做。

【问题讨论】：

你试过var certList = $(".certList").html();吗？

标签： javascript jquery html json clone

【解决方案1】：

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

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

就目前而言，您将字符串与 jQuery 对象连接起来（而 object.ToString() 是 [object Object]）

【讨论】：

但这只会输出选项，而不是选择标签本身

【解决方案2】：

将元素添加到 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);

【讨论】：

【解决方案3】：

尝试使用outerHTML

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

Updated Fiddle

【讨论】：

【解决方案4】：

使用 .parent().html() 代替 .clone()

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

【讨论】：

这将导致不同的问题。您将没有选择元素。
@epascarello 不介意解释会有什么问题？
.html() 只会给你选项。