如何在JavaScript中选择通过createElement动态添加的DOM元素？

你遇到的无效选择器错误和动态添加元素无关，核心问题是你给元素设置的ID里包含了竖线|——在CSS选择器语法中，|是命名空间的分隔符，直接写#node|xxx会被浏览器解析成「查找命名空间为node、标签名为xxx的元素」，自然找不到目标元素。

下面是几种可行的解决办法：

1. 转义选择器中的竖线 #

在使用querySelector时，把ID里的|用双反斜杠\\转义，让浏览器将其当作普通字符处理：

document.querySelector('#node\\|' + String(nodeID))

2. 更换ID的命名规则 #

直接避免在ID里使用特殊字符，把|换成下划线_或者连字符-，比如：

// 创建元素时修改ID格式
newNodeLi.innerHTML = `<span id="node_${String(newNodeID)}" class="tf-nc">
  <p id="nodeTitle_${String(newNodeID)}" class="orgText">Title</p>
  <p id="nodeEmployee_${String(newNodeID)}" class="orgText">Employee</p>
</span>`

// 选择时直接使用普通选择器
document.querySelector('#node_' + String(nodeID))

注意：你原代码里两个<p>用了相同的ID，这不符合HTML规范（ID必须唯一），建议改成上述示例中不同的ID格式。

3. 直接从创建的元素上获取（最推荐） #

既然是你自己动态创建的元素，完全不需要去全局document中查找，直接从newNodeLi上获取内部元素，效率更高且不会有选择器问题：

var newNodeLi = document.createElement('li');
newNodeLi.addEventListener("click", function() { selectNodeEdit(event); }, false);

newNodeLi.innerHTML = `<span id="node|${String(newNodeID)}" class="tf-nc">
  <p id="nodeText|${String(newNodeID)}" class="orgText">Title</p>
  <p id="nodeText|${String(newNodeID)}" class="orgText">Employee</p>
</span>`

// 直接从newNodeLi获取内部的span元素
var targetSpan = newNodeLi.querySelector('.tf-nc');
// 或者转义后通过ID获取
var targetSpan = newNodeLi.querySelector('#node\\|' + String(newNodeID));

depTopLevel.appendChild(newNodeLi);

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