Я использую простой js для изменения внутреннего текста элемента метки, и я не был уверен, на каких основаниях мне следует использовать 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, который показывает, что firstChild.nodeValue значительно быстрее. По крайней мере, я так понимаю это.
Если firstChild.nodeValue намного быстрее, в чем загвоздка? Разве это не поддерживается широко? Есть еще какая-то проблема?
источник
nodeValue
тоже не разбирает html.textContent
выходыtext/plain
пока.innerHTML
выходыtext/html
.Быстрый пример:
var example = document.getElementById('exampleId');
example.textContent = '<a href="https://google.com">google</a>';
вывод: <a href="http://google.com"> google </a>
example.innerHTML = '<a href="https://google.com">google</a>';
вывод: google
Из первого примера видно, что вывод типа
text/plain
не анализируется браузером и приводит к полному отображению содержимого. Выходные данные типаtext/html
говорят браузеру проанализировать его перед отображением.MDN innerHTML , MDN textContent , MDN nodeValue
источник
Два, которые я хорошо знаю и с которыми работаю, - это innerHTML и textContent .
Я использую textContent, когда просто хочу изменить текст абзаца или заголовка следующим образом:
Итак, textContent просто изменяет текст, но не анализирует HTML, как мы можем судить по тегам, видимым в виде обычного текста в результате.
Если мы хотим проанализировать HTML, мы используем innerHTML следующим образом:
Итак, во втором примере строка, которую я назначаю свойству innerHTML элемента DOM, анализируется как HTML.
Это круто и большая уязвимость в безопасности :)
(посмотрите XSS, если вы хотите узнать о безопасности для этого)
источник
innerText - это примерно то, что вы получили бы, если бы выбрали текст и скопировали его. Элементы, которые не отображаются, отсутствуют в innerText.
textContent - это объединение значений всех TextNodes в поддереве. Рендеринг или нет.
Вот отличный пост с подробностями о различиях
innerHTML не следует включать в сравнение с innerText или textContent, так как он совершенно другой, и вы действительно должны знать, почему :-) Посмотрите его отдельно
источник
[Примечание: это сообщение больше о том, чтобы делиться конкретными данными, которые могут кому-то помочь, чем рассказывать людям, что делать]
Если кому-то интересно, что сегодня самое быстрое: https://jsperf.com/set-innertext-vs-innerhtml-vs-textcontent & https://jsperf.com/get-innertext-vs-innerhtml-vs-textcontent ( для второго теста содержимое диапазона представляет собой обычный текст, результаты могут изменяться в зависимости от его содержимого)
Кажется,
.innerHtml
это великий победитель с точки зрения чистой скорости!(ПРИМЕЧАНИЕ: здесь я говорю только о скорости, вы можете поискать другие критерии, прежде чем выбирать, какой из них использовать!)
источник
Element.innerHTML
set
илиget
HTML-код элемента.Пример: У нас есть
<h1>
тег и сильный стиль:<h1 id="myHeader" style="color: green"><strong>My Header</strong> Normal Text</h1>
Чтобыget
содержимое элемента было id равным «myHeader», сделаем то же самое:Результат возврата:
Чтобы «установить» новое содержимое (значение) для этого элемента, код будет здесь:
Таким образом, это свойство работает не только с обычным текстом, но и предназначено для передачи или копирования HTML-кода.
=> Мы не должны его использовать.
Однако многие программисты (включая меня) используют этот атрибут для вставки текста на веб-страницу, и этот метод несет в себе потенциальный риск:
По этой причине использование
innerHTML
не рекомендуется при вставке обычного текста, вместо этого используйтеtextContent
.textContent
Свойство не будет понятно , что код , который вы передать это синтаксис HTML, но только 100% текст Нет больше и не меньше.Результат вернется, если использовать
textContent
в приведенном выше примере:источник