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;
这不是来自示例代码,但因为这是最糟糕的,所以我想用它作为示例。
最佳答案
span#2
是无效的 CSS 选择器,ID 选择器不能以未转义的数字开头(更多信息请参见 the spec )。一般来说,您最好不要使用以数字开头的 ID 值,但如果这样做,您必须以不同的方式选择它们 - 要么不使用 CSS 选择器:
span = document.getElementById("2");
...或者通过转义它(但坦率地说,这有点难看),或者使用属性形式:
span = document.querySelector("[id='2']");
<小时/>
另请注意Scott Marcus' answer — 如果您的代码在尝试获取元素之前没有将 li
附加到文档,您要么希望将其附加到文档,要么使用 querySelector
李
:
span = li.querySelector("[id='2']");
<小时/>
在 CSS 选择器中,正如 Taplar 在评论中指出的那样,在这种特殊情况下,由于 span
有一个类,因此您可以添加该类:
span = document.querySelector("[id='2'].item");
// or
span = li.querySelector("[id='2'].item");
关于javascript - 使用innerHTML设置数据无法用querySelector带数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59936749/