Question

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

我已经调查了createElement（）函数，但尚未掌握它的用法或找到一个好的例子。

Answer 1

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

您真正需要做的是将DIV作为标记的一部分，但使用CSS隐藏它。然后将其复制到LI innerHTML。

这样的事情：

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;
}

Answer 2

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.

Javascript：使用createElement生成Div on Button Click

2 个答案: