свойства устанавливается равным против innerHTML и текстового содержимого. Как выбрать?

Я использую простой js для изменения внутреннего текста элемента label, и я не был уверен, на каком основании я должен использовать innerHTML или nodeValue или textContent. Мне не нужно создавать новый узел или изменять элементы HTML или что - то еще-просто замените текст. Вот пример кода:

var myLabel = document.getElementById("#someLabel");
myLabel.innerHTML = "Some new label text!"; // this works

myLabel.firstChild.nodeValue = "Some new label text!"; // this also works.

myLabel.textContent = "Some new label text!"; // this also works.

Я просмотрел источник jQuery, и он использует nodeValue ровно один раз, но innerHTML и textContent несколько раз. Затем я нашел этот тест jsperf, который указывает возвращение null.nodevalue-это значительно быстрее. По крайней мере, я так это понимаю.

Если возвращение null.nodeValue намного быстрее, в чем подвох? Это не широко поддерживается? Есть ли какая-то другая проблема?

4 87
javascript dom innerhtml nodevalue

4 ответа:

различия между textContent/innerText / innerHTML на MDN.

и ответе на StackOverflow примерно через свойство innerText/свойства устанавливается равным.

резюме

  1. nodeValue немного более запутанным в использовании, но быстрее, чем innerHTML.
  2. innerHTML анализирует содержимое как HTML и занимает больше времени.
  3. textContent использует прямой текст, не не разбирать HTML, а быстрее.
  4. через свойство innerText стили принимает во внимание. Он не будет получать скрытый текст, например.

innerText не существовало в firefox до FireFox 45 в соответствии с caniuse но теперь поддерживается во всех основных браузерах.

108

.textContent выходы text/plain во время .innerHTML выходы text/html.

пример:

var example = document.getElementById('exampleId');

example.textContent = '<a href="https://google.com">google</a>';

вывод: google

example.innerHTML = '<a href="https://google.com">google</a>';

выход: google

вы можете видеть из первого примера, что вывод типа text/plain не анализируется браузером и приводит к полному отображению контента. Вывод типа text/html рассказывает браузер, чтобы разобрать его перед отображением.

MDN innerHTML, MDN textContent,МДН свойства устанавливается равным

43

два я хорошо знаю и работать с являются innerHTML и textContent.

Я использую textContent когда я просто хочу изменить текст абзаца или заголовка так:

var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')

setTimeout(function () {
  heading.textContent = 'My New Title!'
  paragraph.textContent = 'My second <em>six word</em> story.'
}, 2000)
em { font-style: italic; }
<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>

и textContent просто изменяет текст, но он не анализирует HTML, как мы можем сказать из тегов, видимых в обычном тексте в результате там.

если мы хотим разобрать HTML, мы используем innerHTML такой:

var heading = document.getElementById('heading')
var paragraph = document.getElementById('paragraph')

setTimeout(function () {
  heading.innerHTML = 'My <em>New</em> Title!'
  paragraph.innerHTML = 'My second <em>six word</em> story.'
}, 2000)
em { font-style: italic; }
<h1 id="heading">My Title</h1>
<p id="paragraph">My six word story right here.</p>

Итак, этот второй пример анализирует строку, которую я назначаю элементу DOM innerHTML свойство как HTML.

это потрясающе, и большая уязвимость : )

(искать XSS если вы хотите знать о безопасности для этого)

5

innerText это примерно то, что вы получите, если вы выделили текст и скопировали его. Элементы, которые не отображаются, не присутствуют в innerText.

textContent является конкатенацией значений все TextNodes в поддереве. Будь то рендеринг или нет.

здесь Великий пост оформление различия

innerHTML не следует включать в сравнение с innerText или textContent, так как он полностью отличается, и вы действительно должны знать, почему:-) посмотрите его отдельно

2