如何通过编程将新建div追加到现有div？getElementById返回null如何解决

你通过document.createElement()创建的元素，在没有主动插入到当前页面的DOM树之前，仅存在于JavaScript内存中，不属于页面正式的DOM节点树。而document.getElementById()只会扫描当前页面已挂载的DOM节点来匹配对应id的元素，因此你给内存中的元素设置了id也无法被该方法检索到，自然返回null。

根据你的使用场景可以二选一：

• 如果你确实需要通过id来查找父容器，先将创建好的父容器插入到DOM树后再执行查找操作，参考代码如下：

var uiDiv = document.createElement("div");
uiDiv.id = "f_jsonuiDiv";
uiDiv.innerHTML = "jsonUI controls";
// 先将父容器插入到DOM树，示例为插入到body，可根据实际需求插入到对应节点下
document.body.appendChild(uiDiv);

// 此时再通过id查找即可获取到正确的元素
const parentId = "f_jsonuiDiv";
var parElement = document.getElementById(parentId);

const newDiv = document.createElement("div"); 
newDiv.innerHTML = "NEW DIV"; 
parElement.appendChild(newDiv); // 可正常执行

• 如果你只是要给刚创建的父容器追加子元素，完全不需要通过id查找，直接使用创建父容器时的变量引用操作即可，你代码中最后一行的uiDiv.appendChild(newDiv)本身就是最优写法，无需额外绕路通过id检索。

createElement是document对象的专属方法，普通DOM元素本身不存在该方法，你注释中写的parElement.createElement("div")本身就是语法错误，哪怕parElement有值也会抛出异常。

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