如何动态在Div元素内添加Paragraph标签？附现有代码示例

嘿，我来帮你搞定这个需求！你已经写好了创建container div的基础代码，现在要往里面插入<p class="album"><h2>1975</h2></p>这个结构，这里有两种实用的原生JS方法，你可以根据场景选择：

方法一：原生DOM节点构建（规范严谨，适合复杂结构扩展） #

这种方法和你原有的代码风格保持一致，通过一步步创建节点、设置属性、组装层级来实现：

// 你原来创建container div的代码
var div = document.createElement("div"); 
var attr = document.createAttribute("id"); 
attr.value = "container"; 
div.setAttributeNode(attr); 

// 新增：构建p和h2节点并组装
// 1. 创建p标签并设置class
var p = document.createElement("p");
p.className = "album";

// 2. 创建h2标签并设置文本内容
var h2 = document.createElement("h2");
h2.textContent = "1975";

// 3. 组装节点：把h2放进p，再把p放进container div
p.appendChild(h2);
div.appendChild(p);

// 最后将container添加到页面body中
document.body.appendChild(div);

方法二：innerHTML快速插入（简洁高效，适合简单固定结构） #

如果你的结构比较固定，不需要后续动态修改内部节点，可以用innerHTML直接插入HTML字符串，代码更短：

// 你原来创建container div的代码
var div = document.createElement("div"); 
var attr = document.createAttribute("id"); 
attr.value = "container"; 
div.setAttributeNode(attr); 

// 直接插入目标HTML结构
div.innerHTML = '<p class="album"><h2>1975</h2></p>';

document.body.appendChild(div);

额外提示 #

如果后续需要给已存在的container div添加内容（不是刚创建的），可以先通过var container = document.getElementById('container')获取该元素，再执行上面的节点组装或innerHTML插入操作即可。

内容的提问来源于stack exchange，提问作者TheBeas1