Разница между innerText и innerHTML

В чем разница между innerHTML, innerTextи childNodes[].valueв JavaScript?

Однако, в отличие от этого innerText, он innerHTMLпозволяет работать с форматированным текстом HTML и не позволяет автоматически кодировать и декодировать текст. Другими словами, innerTextизвлекает и устанавливает содержимое тега в виде простого текста, тогда как innerHTMLизвлекает и устанавливает содержимое в формате HTML.

Приведенные ниже примеры относятся к следующему фрагменту HTML:

<div id="test">
   Warning: This element contains <code>code</code> and <strong>strong language</strong>.
</div>

На узел будет ссылаться следующий JavaScript:

var x = document.getElementById('test');

element.innerHTML

Устанавливает или получает синтаксис HTML, описывающий потомков элемента

x.innerHTML
// => "
// =>   Warning: This element contains <code>code</code> and <strong>strong language</strong>.
// => "

Это часть спецификации W3C для анализа и сериализации DOM . Обратите внимание, что это свойство Elementобъектов.

node.innerText

Устанавливает или получает текст между начальным и конечным тегами объекта

x.innerText
// => "Warning: This element contains code and strong language."

• innerTextбыл представлен Microsoft и некоторое время не поддерживался Firefox. В августе 2016 года innerTextбыла принята WHATWG и добавлена ​​в Firefox в v45.
• innerText дает вам представление текста, которое пытается соответствовать тому, что отображается в браузере, это означает:
  • innerTextприменяется text-transformи white-spaceправила
  • innerText удаляет пробелы между строк и добавляет разрывы строк между элементами
  • innerText не вернет текст для невидимых предметов
• innerTextвернется textContentдля элементов, которые никогда не отображаются как <style />и `
• Свойство Nodeэлементов

node.textContent

Получает или задает текстовое содержимое узла и его потомков.

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

Хотя это стандарт W3C , он не поддерживается IE <9.

• Не знает стиля и поэтому вернет содержимое, скрытое CSS
• Не запускает оплавление (следовательно, более производительное)
• Свойство Nodeэлементов

node.value

Это зависит от элемента, на который вы нацелены. Для приведенного выше примера xвозвращает объект HTMLDivElement , для которого не определено valueсвойство.

x.value // => null

<input />Например, теги input ( ) определяют valueсвойство , которое ссылается на «текущее значение в элементе управления».

<input id="example-input" type="text" value="default" />
<script>
  document.getElementById('example-input').value //=> "default"
  // User changes input to "something"
  document.getElementById('example-input').value //=> "something"
</script>

Из документов :

Примечание: для определенных типов ввода возвращаемое значение может не совпадать со значением, введенным пользователем. Например, если пользователь вводит нечисловое значение в <input type="number">, возвращаемое значение может быть пустой строкой.

Образец скрипта

Вот пример, который показывает вывод для HTML, представленного выше:

var properties = ['innerHTML', 'innerText', 'textContent', 'value'];

// Writes to textarea#output and console
function log(obj) {
  console.log(obj);
  var currValue = document.getElementById('output').value;
  document.getElementById('output').value = (currValue ? currValue + '\n' : '') + obj; 
}

// Logs property as [propName]value[/propertyName]
function logProperty(obj, property) {
  var value = obj[property];
  log('[' + property + ']'  +  value + '[/' + property + ']');
}

// Main
log('=============== ' + properties.join(' ') + ' ===============');
for (var i = 0; i < properties.length; i++) {
  logProperty(document.getElementById('test'), properties[i]);
}

<div id="test">
  Warning: This element contains <code>code</code> and <strong>strong language</strong>.
</div>
<textarea id="output" rows="12" cols="80" style="font-family: monospace;"></textarea>

InnerTextСвойство html-кодирует содержимое, поворачивается <p>на <p>и т. д. Если вы хотите вставить HTML-теги, которые вам нужно использовать InnerHTML.

Простыми словами:

1. innerTextпокажет значение как есть и проигнорирует любое HTMLформатирование, которое может быть включено.
2. innerHTMLпокажет значение и применит любое HTMLформатирование.

var element = document.getElementById("main");
var values = element.childNodes[1].innerText;
alert('the value is:' + values);

Для дальнейшего уточнения и получения значения Alec, например, используйте другой .childNodes [1]

var element = document.getElementById("main");
var values = element.childNodes[1].childNodes[1].innerText;
alert('the value is:' + values);

С точки зрения MutationObserversнастройки настройка innerHTMLгенерирует childListмутацию из-за того, что браузеры удаляют узел, а затем добавляют новый узел со значением innerHTML.

Если вы установите innerText, characterDataмутация генерируется.

Единственная разница между innerTextи innerHTMLзаключается в том, что innerTextстрока вставляется в элемент как есть, а innerHTMLзапускается как HTML-контент.

const ourstring = 'My name is <b class="name">Satish chandra Gupta</b>.';
document.getElementById('innertext').innerText = ourstring;
document.getElementById('innerhtml').innerHTML = ourstring;

.name{
color:red;
}

<h3>Inner text below. It inject string as it is into the element.</h3>
<div id="innertext"></div>
<br />
<h3>Inner html below. It renders the string into the element and treat as part of html document.</h3>
<div id="innerhtml"></div>

InnerTextбудет возвращать только текстовое значение страницы с каждым элементом на новой строке в виде обычного текста, в то время как innerHTMLбудет возвращать содержимое HTML всего внутри bodyтега и childNodesбудет возвращать список узлов, как следует из названия.

innerTextСвойство возвращает фактическое текстовое значение HTML - элемента , а innerHTMLвозвращает HTML content. Пример ниже:

var element = document.getElementById('hello');
element.innerText = '<strong> hello world </strong>';
console.log('The innerText property will not parse the html tags as html tags but as normal text:\n' + element.innerText);

console.log('The innerHTML element property will encode the html tags found inside the text of the element:\n' + element.innerHTML);
element.innerHTML = '<strong> hello world </strong>';
console.log('The <strong> tag we put above has been parsed using the innerHTML property so the .innerText will not show them \n ' + element.innerText);
console.log(element.innerHTML);

<p id="hello"> Hello world 
</p>

чтобы добавить в список, innerText сохранит ваше преобразование текста, innerHTML не будет