如何使用DOM向HTML容器添加指定元素？代码错误排查

你的第3题实现代码存在2个核心问题，直接导致目标div无法正常显示：

• 子元素挂载逻辑缺失、顺序错误：创建完div内部的<h1>和<p>元素后，你没有将这两个子元素追加到新建的myDiv节点下，仅将空的myDiv挂载到了容器中，两个子元素根本没有进入div的结构树
• 边框样式写法无效：你设置的border: black;是不完整的CSS属性，border属性必须同时指定边框宽度、线型、颜色三个参数才会渲染，仅填写颜色不会显示黑色边框

const container = document.querySelector('#container');

const myP = document.createElement("p");
myP.style.color = "red"; 
myP.textContent = "Hey I'm red!"; 

const myH = document.createElement("h3")
myH.style.color = "blue"; 
myH.textContent = "I'm a blue h3!"; 

container.appendChild(myP);
container.appendChild(myH);

const myDiv = document.createElement("div"); 
// 补全border属性的必填参数：1px宽度、实线线型、黑色
myDiv.setAttribute('style', 'border: 1px solid black; background: pink;'); 

const anotherH = document.createElement("h1"); 
anotherH.textContent = "I'm in a div"; 
const anotherP = document.createElement("p"); 
anotherP.textContent = "ME TOO!"; 

// 按题目提示，先将内部子元素追加到div中
myDiv.appendChild(anotherH);
myDiv.appendChild(anotherP);

// 最后将组装完成的div添加到容器内
container.appendChild(myDiv);

核心逻辑提示：DOM节点操作时，独立创建的节点不会自动产生父子关联，必须通过appendChild手动指定挂载关系，且要注意挂载顺序：先组装内部结构，再把父节点挂到页面已存在的容器上。

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