Tampermonkey脚本appendChild失效：子元素无法追加至父容器

嘿，我看了你的代码逻辑，问题出在DOM元素对象和HTML字符串的用法混淆上，这是新手写DOM操作时很容易踩的坑！

先说说你成功的部分为啥没问题 #

你把ControllerBG追加到motd里的逻辑是完全正确的：

const ControllerBG = document.createElement('div');
ControllerBG.className = 'ControllerBG';
document.getElementById('motd').appendChild(ControllerBG);

这里你用document.createElement创建了一个真实的DOM元素对象，然后通过appendChild把它挂载到目标节点上，所以这部分能正常显示。

为啥TopContainer加不进去？ #

你提到尝试过ControllerBG.innerHTML = TopContainer和直接追加都不行，大概率是这两种情况之一：

1. TopContainer是DOM元素，但你用了innerHTML：innerHTML的参数需要是HTML格式的字符串，如果你把一个DOM元素对象传给它，浏览器会把这个对象转换成[object HTMLDivElement]这样的字符串，自然看不到实际内容；
2. TopContainer是HTML字符串，但你用了appendChild：appendChild要求传入的是DOM元素对象，直接传字符串的话浏览器根本识别不了，当然不会有任何变化（而且这种情况控制台确实不会报错，因为语法上没毛病，但逻辑错了）。

正确的两种解决方式 #

方式1：用DOM元素对象追加（推荐，更灵活）

先把TopContainer也创建成DOM元素，再用appendChild挂载：

// 创建TopContainer元素
const TopContainer = document.createElement('div');
TopContainer.className = 'TopContainer';
// 可以给它加文本内容或者子元素
TopContainer.textContent = '这里是TopContainer的内容';
// 挂载到ControllerBG里
ControllerBG.appendChild(TopContainer);

方式2：用HTML字符串设置innerHTML

如果你更习惯写HTML结构字符串，就直接把字符串传给innerHTML：

// 定义TopContainer的HTML字符串
const TopContainerHTML = '<div class="TopContainer">这里是TopContainer的内容</div>';
// 直接设置到ControllerBG里
ControllerBG.innerHTML = TopContainerHTML;

总结一下核心要点 #

• appendChild() → 传DOM元素对象
• innerHTML → 传HTML格式的字符串
  搞清楚这两个API的参数要求，DOM操作就不会踩这种坑啦！

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