使用 Jquery 克隆下拉列表并附加到动态 Div答案

【问题标题】：Cloning a Dropdown list using Jquery and appending to a Dynamic Div使用 Jquery 克隆下拉列表并附加到动态 Div
【发布时间】：2014-11-18 02:39:32
【问题描述】：

我的页面中已经有一个 id ="mainDDL" 的下拉列表，其中包含一些数据..

现在我想克隆这个下拉列表并附加到一个 Div。

我正在使用以下代码：

 var ddl = $("#mainDDL").clone();                                                             
 ddl.attr("id", "ddlCloned");
 ddl.attr("name", "ddlCloned"); 
 var innerDiv = document.createElement("div");
 innerDiv.innerHTML=ddl[0];

但是当我在控制台窗口中检查“innerDiv”时..它显示：

[对象 HTMLDivElement]

谁能帮帮我..

【问题讨论】：

标签： javascript jquery html asp.net

【解决方案1】：

我认为您正在寻找 .append？

$(document).ready(function(){
  var ddl = $("#mainDDL").clone();
  ddl.attr("id", "ddlCloned");
  ddl.attr("name", "ddlCloned");
  var innerDiv = $("<div />").appendTo('body');
  innerDiv.append(ddl);
})

http://jsfiddle.net/3ojex7f5/1/

【讨论】：

【解决方案2】：

为什么不使用 jQuery 而不是纯 JavaScript ？

 var ddl = $("#mainDDL").clone();                                                             
 ddl.attr("id", "ddlCloned");
 ddl.attr("name", "ddlCloned"); 
 var innerDiv = $('div');
 innerDiv.append(ddl[0]);

问题在于 innerHTML 需要一个 string 值而不是 DOM 元素（对象），因此当您分配 ddl[0] 时，toString() 对象的函数被调用并将结果附加到您的div。

如果你想使用 JavaScript 解决它，你需要调用appendChild() 函数。

 var ddl = $("#mainDDL").clone();   
 ddl.attr("id", "ddlCloned");
 ddl.attr("name", "ddlCloned"); 
 var innerDiv = document.createElement("div");
 innerDiv.appendChild(ddl[0]);

*请注意，您有混合使用 jQuery 和 JavaScript 来处理 de DOM，我建议只选择一个以获得更易读的代码。

【讨论】：