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

Cloning a Dropdown list using Jquery and appending to a Dynamic Div

本文关键字：动态 Div Jquery 下拉列表 使用      更新时间：2023-09-26

我的页面中已经有一个 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"时。它显示：

[object HTMLDivElement]

任何人都可以帮我..

我想你正在寻找.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/

为什么不使用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，我建议选择一个以获得更具可读性的代码。

相关文章：