javascript - 如何通过 Javascript “创建” HTML 元素？

Question

也许有更好的方式来表达我的问题，即“通过 Javascript 动态创建 DOM 元素”，但我决定写一个简单的标题，以防后者出错。无论如何，有没有办法可以通过 Javascript “生成” HTML 元素？例如，我可以在我的网站上单击一个按钮，然后会出现一个段落？

Answer 1

你可以createElement()这样使用：

var el = docment.createElement("elementtype");

这将创建任何元素，如果您替换elementtype为元素的类型（“div”、“p”等）

之后，您可以在要将此新创建的元素附加到的任何元素上使用本机.appendChild()或方法。.insertBefore()

var attachTo = document.getElementById('appendToMe');
attachTo.appendChild(el);

它将在该元素内的最后一个元素之后的页面上。

参考：

• https://developer.mozilla.org/en-US/docs/Web/API/document.createElement
• https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild
• https://developer.mozilla.org/en-US/docs/Web/API/Node.insertBefore

Answer 2

var element = document.createElement('p');
element.innerHTML = "Hey, this is a new paragraph!";
parentElement.appendChild(element);

有关详细信息，请参阅document.createElement和Node.appendChild