CODEWITHSUNDEEP
javascriptinnerhtmlqueryselector
Sophia Lee
Sophia Lee

Reputation: 37

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

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.

Upvotes: 0

Views: 511

Answers (3)

T.J. Crowder
T.J. Crowder

Reputation: 1075337

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");

Upvotes: 2

nonopolarity
nonopolarity

Reputation: 151196

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).

Upvotes: 0

Scott Marcus
Scott Marcus

Reputation: 65855

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

Upvotes: 1

Related Questions