0 
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;

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

4

3 回答 3

2

span#2是一个无效的 CSS 选择器，ID 选择器不能以非转义数字开头（更多在规范中）。一般来说，你最好不要使用以数字开头的 ID 值，但如果你这样做了，你必须以不同的方式选择它们——要么不使用 CSS 选择器：

span = document.getElementById("2");

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

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

另请注意Scott Marcus 的回答—— 如果您的代码li在尝试获取元素之前没有querySelector将li

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

在 CSS 选择器中，正如 Taplar 在评论中指出的那样，在这种特殊情况下，由于span有一个类，您可以添加该类：

span = document.querySelector("[id='2'].item");
// or
span = li.querySelector("[id='2'].item");
于 2020-01-27T18:23:51.763 回答
1

如果使用document.createElement()，则新元素存在于内存中，但不会自动插入到当前 DOM 中。您需要将其附加或插入到 DOM 中，然后您才能找到它。

HTML 字符串会立即解析到 DOM 中，因此.innerHTML您无需正式附加或插入以这种方式创建的元素。这就是为什么在下面的代码中，只需要附加变量而不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);

于 2020-01-27T18:25:24.697 回答
0

您的ID 不能以数字开头。

ID 和 NAME 标记必须以字母 ([A-Za-z]) 开头，后跟任意数量的字母、数字 ([0-9])、连字符 ("-")、下划线 ("_") , 冒号 (":") 和句点 (".")。

使用类似的东西：

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

和你的跨度：

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

（所有在反勾号内，如您的代码中所示）。

于 2020-01-27T18:22:02.470 回答