Question

我有一个id =“mainDDL”的下拉列表已在我的页面中包含一些数据..

现在我要克隆此Dropdownlist并附加到Div。

我使用以下代码：

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

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

[object HTMLDivElement]

任何人都可以帮帮我..

Answer 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/

Answer 2

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

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

问题是 innerHTML 需要字符串值而不是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，我建议你选择一个代码来获得更易读的代码。

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

2 个答案: