使用 innerHTML 设置数据不能用 querySelector 带数据

Question

const li = document.createElement('li');
li.innerHTML = `
  <i class="fa fa-square-o item btn emptyButton" aria-hidden="true"></i>
  <i class="fa fa-check-square-o item btn checkedButton dis-non" aria-hidden="true"></i>
  <span class='item' id = '${anArray.length + 1}'>${INPUTVALUE}</span>
  <i class="fa fa-trash-o btn removeButton item" aria-hidden="true"></i>
`;

我正在像上面那样设置 HTML 数据，然后我在获取数据时遇到了问题。我想使用 querySelector 就像跟随 span 及其 id：

document.querySelector('span#2')

但我什么也得不到，所以我不得不做一些疯狂的工作，比如：

ET.arentElement.arentElement.parentElement.previousElementSibling.firstElementChild.innerText;

这不是来自示例代码，但因为这是最糟糕的所以我想用它作为示例。

Answer 1

你的ID cannot start with a number。

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

使用类似于：

document.querySelector('#my-data-2')

你的跨度：

<span class='item' id ='my-data-${anArray.length + 1}'>

（全部在反勾内，如您的代码所示）。

Answer 2

span#2 是无效的 CSS select 或者，ID select 或者不能以未转义的数字开头（更多见 the spec）。一般来说，最好不要使用以数字开头的 ID 值，但如果这样做，则必须 select 以不同的方式使用 - 不使用 CSS select 或：

span = document.getElementById("2");

...或者通过转义它（但坦率地说，这有点难看），或者使用属性形式：

span = document.querySelector("[id='2']");

另请注意 — 如果您的代码在尝试获取元素之前未将 li 附加到文档中，您可能想要将其附加到文档中，或者使用querySelector 在 li:

span = li.querySelector("[id='2']");

在 CSS select 或者，正如 Taplar 在评论中指出的那样，在这种特殊情况下，由于 span 有一个 class，您可以添加class:

span = document.querySelector("[id='2'].item");
// or
span = li.querySelector("[id='2'].item");

Answer 3

如果使用document.createElement()，则新元素存在于内存中，但不会自动插入当前DOM。你需要把它 append or insert 放到 DOM 然后你就可以找到它了。

使用 .innerHTML，HTML 字符串会立即解析为 DOM，因此您无需正式追加或插入以这种方式创建的元素。这就是为什么在下面的代码中，只需要附加 li 变量，而不需要附加该元素的所有 .innerHTML。

let anArray = [];
let INPUTVALUE = "test";

const li = document.createElement('li');
li.innerHTML = `<i class="fa fa-square-o item btn emptyButton" aria-hidden="true"></i>
<i class="fa fa-check-square-o item btn checkedButton dis-non" aria-hidden="true"></i>
<span class='item' id = '${anArray.length + 1}'>${INPUTVALUE}</span>
<i class="fa fa-trash-o btn removeButton item" aria-hidden="true"></i>`;

// You must append/insert the dynamically created element into the DOM
document.body.appendChild(li);

// Then, you can find it:
console.log(document.querySelector("span.item").textContent);

使用 innerHTML 设置数据不能用 querySelector 带数据

Setting data by using innerHTML can't bring data with querySelector

javascript

innerhtml

queryselector