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是在段落前使用的标题级别2，即<p>是

。

如何在Div内动态添加段落？

1 个答案: