如何动态在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>分开，因为它们是单独的元素。例如exmaple和h2是在段落前使用的两个标题级别，即<p>。