javascript - 如何在 Div 中动态添加段落？

Question

我有创建一个 div 元素的代码:

 var div = document.createElement("div");
 var attr = document.createAttribute("id");
 attr.value="container";
 div.setAttributeNode(attr);
 document.body.appendChild(div);

如何在 Div 元素中动态添加 Paragraph 标签？

它应该是这样的:

<div id="container"
    <p class="album"><h2>1975</h2></p>
</div>

Answer 1

您可以创建另一个变量来存放您要创建的元素。考虑一下:

var div = document.createElement("div");
var attr = document.createAttribute("id");
var p = document.createElement("p"); //create the paragraph tag
p.classList += 'album'; // give it a class by adding to the list
p.innerHTML = '<h2>1975</h2>'; // add html text or make another element if needed.
attr.value="container";
div.setAttributeNode(attr);
div.appendChild(p); add the <p> element to the div 
document.body.appendChild(div);

您使用 document.createElement() 创建所需的元素设置所需的属性、类等。然后一旦你设置好了，你就可以将元素变量附加到父元素，就像本例中的 div 一样。您可以按照此模式在 JavaScript 中动态生成所需数量的 html。

您可以对 <h2> 执行相同的操作元素也是如此，像这样:

var h2Element = document.createElement('h2');
h2Element.innerText = '1975';
p.appendChild(h2Element);

p变量包含段落标记和 h2Element包含该标签的内容。但是，如果您想要 <h2>，我建议您对于文本，它应该与 <p> 分开因为它们是独立的元素。例如，h2 是段落前使用的二级标题，即 <p>。是。