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

I was setting HTML data like above, then I was having trouble with getting data. I wanted to use querySelector like following with span and its id: 

document.querySelector('span#2')

But I could not get anything so I had to do crazy work like:

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

This is not from the example code, but because this is the worst so I wanted to use this as an example.

technophyle
  • 7,972
  • 6
  • 29
  • 50
Sophia Lee
  • 37
  • 8
  • Welcome to Stack Overflow! Please take the [tour] (you get a badge!), have a look around, and read through the [help], in particular [*How do I ask a good question?*](/help/how-to-ask) I also recommend Jon Skeet's [Writing the Perfect Question](https://codeblog.jonskeet.uk/2010/08/29/writing-the-perfect-question/). – T.J. Crowder Jan 27 '20 at 18:22
  • @Crowder Thank you for the tip! I am going to read everything :) – Sophia Lee Jan 27 '20 at 18:36

3 Answers3

2

span#2 is an invalid CSS selector, ID selectors can't start with unescaped digits (more in the spec). In general, you're best off not using ID values that start with digits, but if you do, you have to select them differently — either by not using a CSS selector:

span = document.getElementById("2");

...or by escaping it (but frankly that's a bit ugly), or using the attribute form:

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

Note also Scott Marcus' answer — if your code wasn't appending the li to the document before trying to get the element, you'd either want to append it to the document, or use querySelector on li:

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

In the CSS selector, as Taplar pointed out in a comment, in this particular case since the span has a class, you can add the class:

span = document.querySelector("[id='2'].item");
// or
span = li.querySelector("[id='2'].item");
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • I should have read 'How do I ask a good question?' before I ask. You are giving me full of information but I gave you not enough info. I'm sorry. I already did append child. And `document.querySelector("[id=2].item");` says it is not a valid selector. I gave id with numbers because I was comparing with other elements id if it is equal. I should change my whole code or organize my question again. Thank you very much for your help! – Sophia Lee Jan 27 '20 at 19:35
  • @SophiaLee - Sorry about that, you need quotes around the `2` for the same reason it's not valid in `#2`. I've fixed the answer. – T.J. Crowder Jan 28 '20 at 07:03
1

If you use document.createElement(), then the new element exists in memory, but is not automatically inserted into the current DOM. You need to append or insert it into the DOM and then you will be able to locate it.

With .innerHTML the HTML string is parsed into the DOM immediately so you don't need to formally append or insert an element created that way. This is why, in the code below, only the li variable needs to be appended and all the .innerHTML of that element does not.

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);
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
0

Your 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 (".").

Use something like:

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

and your span:

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

(all inside the back tick, as in your code).

nonopolarity
  • 146,324
  • 131
  • 460
  • 740