Різниця між InternalText і InternalHTML

У чому різниця між 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>.
// => "

Це частина специфікації розбору та серіалізації DOM W3C . Зауважте, що це властивість Elementоб'єктів.

node.innerText

Встановлює або отримує текст між початковим і кінцевим тегами об'єкта

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

• innerTextбула представлена ​​корпорацією Майкрософт і деякий час не підтримувалась 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 />Наприклад, теги вводу ( ), наприклад, визначають 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 збереже ваш текст-перетворення, внутрішнійHTML-звичай