使用appendChild、getElementById无法向指定div添加文本节点问题

你的代码有3个核心问题，逐一修正即可正常运行：

• 函数定义语法错误，且未调用函数。你写的myScript() { ... }不是合法的JavaScript函数声明，普通函数必须在函数名前加function关键字才能被识别；同时函数定义后如果不手动执行调用，函数内部的逻辑完全不会运行。
• 同一个DOM节点无法同时挂载到多个父元素下。你创建的TextContainer是唯一的p元素节点，先把它追加到TopBarContainer后，紧接着又把同一个节点追加到document.body，DOM的原生机制会自动将节点从之前的父元素移除，移动到最新的父元素下，相当于前一行追加到TopBarContainer的操作直接被后一行覆盖。你之前做对照测试能成功，就是因为测试时只往body挂载了一次节点，不存在重复挂载的冲突。
• 脚本执行时机问题。如果你的脚本实际放置位置在id为TopBarContainer的div之前（比如写在HTML的head标签里），脚本运行时浏览器还没解析到目标div元素，document.getElementById("TopBarContainer")会拿到null值，直接报错导致后续逻辑中断。你当前给出的代码里脚本放在div后面不存在这个问题，后续调整代码位置时需要留意这点。

修正后的可运行代码如下：

<div class="top" id="TopBarContainer">
    <img src="webibarmax.png" id="topbar" title="The bar" alt="Superbar">
</div>

<script>
// 正确声明函数
function myScript() {
    var TextContainer = document.createElement("p");
    var TextItem = document.createTextNode("textextext");
    TextContainer.appendChild(TextItem);

    // 移除重复挂载到body的冗余代码，只往目标容器追加节点
    document.getElementById("TopBarContainer").appendChild(TextContainer);
}
// 主动调用函数触发逻辑执行
myScript();
</script>

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