Установка данных с помощью внутреннего HTML не может принести данные с querySelector - PullRequest
Новая
       22

Установка данных с помощью внутреннего HTML не может принести данные с querySelector

1 голос
/ 27 января 2020 
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 и его идентификатором: 

document.querySelector('span#2')

Но я ничего не мог получить, поэтому мне пришлось делать сумасшедшую работу, например: 

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

Это не из примера кода, а потому что это худший, поэтому я хотел использовать это в качестве примера.

Ответы [ 3 ]

2 голосов
/ 27 января 2020

span#2 является недопустимым селектором CSS, селекторы идентификаторов не могут начинаться с неэкранированных цифр (больше в spe c) Как правило, лучше не использовать значения идентификаторов, которые начинаются с цифр, но если вы это сделаете, вам придется выбирать их по-другому - либо не используя селектор CSS: 

span = document.getElementById("2");

.. или, избежав этого (но, честно говоря, это немного уродливо), или используя форму атрибута: 

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

Обратите также внимание Скотт Маркус 'ответ - если ваш код не был' t добавляя li к документу перед попыткой получить элемент, вы можете либо добавить его к документу, либо использовать querySelector для li: 

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

В селекторе CSS, как указал Таплар в комментарии, в данном конкретном случае, поскольку у span есть класс, вы можете добавить класс: 

span = document.querySelector("[id='2'].item");
// or
span = li.querySelector("[id='2'].item");
1 голос
/ 27 января 2020

Если вы используете document.createElement(), то новый элемент существует в памяти, но не вставляется автоматически в текущий DOM. Вам нужно добавить или вставить его в 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);
0 голосов
/ 27 января 2020

Ваш идентификатор не может начинаться с цифры .

Токены ID и ИМЯ должны начинаться с буквы ([A-Za-z]) и могут сопровождаться любым количеством букв, цифр ([0-9]), дефисов ("- "), подчеркивания (" _ "), двоеточия (": ") и точки (". ").

Используйте что-то вроде: 

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

и ваш диапазон : 

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

(все внутри обратного тика, как в вашем коде).

...