我有创建一个 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>
最佳答案
您可以创建另一个变量来存放您要创建的元素。考虑一下:
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>
。是。
关于javascript - 如何在 Div 中动态添加段落?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59532439/