Javascript：单击按钮时使用createElement生成Div

我有一个列表，每个项目都有一个按钮。单击按钮时，我希望列表项中出现一个div。对于每个列表项，此显示div的内容都是相同的。如何使用Javascript动态生成这些div

---

我已经研究了createElement（）函数，但还没有掌握它的用法或找到一个好的例子。

您可以使用document.createElement（），但这并不是您真正想要的方式（主要是因为性能）

您真正需要做的是将DIV作为标记的一部分，但使用CSS使其不可见。然后把它复制到HTML中

大概是这样的：

CSS:
.hidden-element
{
   display:none;
}

HTML:
<ul>
  <li id="firstListItem"></li>
</ul>

<div  id="myDiv" class="hidden-element">
     <div>My Div Content</div>
</div>

JavaScript:

function showDivContent()
{
 var listItem = document.getElementById('firstListItem');
 var myContent = document.getElementById('myDiv').innerHTML;
 listItem.innerHTML = myContent;
}

CSS:
.隐藏元素
{
显示：无；
}
HTML:



我的Div内容
JavaScript:
函数showDivContent（）
{
var listItem=document.getElementById（'firstListItem'）；
var myContent=document.getElementById（'myDiv'）.innerHTML；
listItem.innerHTML=myContent；
}

我喜欢这个解决方案。不过有几个问题。我可以这样做：

listItem.innerHTML+=myContent//Append

或者是否有我应该使用的Append命令？其次，如果隐藏元素中的嵌套div具有onclick（）处理程序，该怎么办。我可以通过编程更改onclick（）处理程序的函数参数吗？是的，您可以附加内容，innerHTML是JS的简单字符串。如果onclick事件的参数依赖于DIV本身，那么最好将其作为参数传递：onclick=“myFunction（this）；”或者，您可以在添加DIV元素本身时动态分配onclick处理程序：firstListItem.innerHTML=myContent；对于（var j=0；j关于

document.createElement（）的假定性能问题）

只是在您使用它来创建元素负载时才需要考虑的问题。对于少数元素，它永远不会成为问题，并且比

innerHTML

有显著的优势。这是真的。但是，当我不知道div的内部内容有多复杂时，我会使用innerHTML并让浏览器渲染引擎来完成：）我在这里使用与StringBuilder使用相同的方法-如果是大量字符串或idk确切数字，我将使用它。干杯

HTMLFragment

？也许您将

document.createElement（）

与

document.createDocumentFragment（）

混淆了

document.createElement（）

创建一个元素。我认为任何还没有绑定到dom的东西都被认为是一个“片段”，我的错。

var newDiv = document.createElement("div") // You now have an HTMLFragment
    newDiv.id = "Something"
document.body.appendChild(newDiv) // The body now has a new div appended to it.