Różnica między tekstem wewnętrznym a tekstem wewnętrznym HTML

Jaka jest różnica między JavaScript innerHTML, innerTexta childNodes[].valueJavaScript?

W przeciwieństwie do innerTexttego innerHTMLpozwala pracować z tekstem sformatowanym HTML i nie koduje i nie dekoduje automatycznie. Innymi słowy, innerTextpobiera i ustawia zawartość znacznika jako zwykły tekst, podczas gdy innerHTMLpobiera i ustawia treść w formacie HTML.

Poniższe przykłady odnoszą się do następującego fragmentu kodu HTML:

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

Do węzła będzie odwoływał się następujący JavaScript:

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

element.innerHTML

Ustawia lub pobiera składnię HTML opisującą potomków elementu

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

Jest to część specyfikacji parsowania i serializacji DOM W3C . Uwaga: jest to właściwość Elementobiektów.

node.innerText

Ustawia lub pobiera tekst między znacznikami początkowym i końcowym obiektu

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

• innerTextzostał wprowadzony przez Microsoft i przez pewien czas nie był obsługiwany przez Firefox. W sierpniu 2016 r. innerTextZostał przyjęty przez WHATWG i został dodany do przeglądarki Firefox w wersji 45.
• innerText zapewnia stylową reprezentację tekstu, który próbuje dopasować do tego, co renderuje przeglądarka, co oznacza:
  • innerTextobowiązuje text-transformi white-spacereguluje
  • innerText przycina białe spacje między liniami i dodaje podział linii między elementami
  • innerText nie zwróci tekstu dla niewidocznych elementów
• innerTextpowróci textContentdla elementów, które nigdy nie są renderowane jak <style />i `
• Właściwość Nodeelementów

node.textContent

Pobiera lub ustawia zawartość tekstową węzła i jego potomków.

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

Chociaż jest to standard W3C , nie jest obsługiwany przez IE <9.

• Nie jest świadomy stylu i dlatego zwróci treści ukryte przez CSS
• Nie wyzwala ponownego wlania (dlatego jest bardziej wydajny)
• Właściwość Nodeelementów

node.value

Ten zależy od elementu, na który celujesz. W powyższym przykładzie xzwraca obiekt HTMLDivElement , który nie ma valuezdefiniowanej właściwości.

x.value // => null

<input />Na przykład tagi wejściowe ( ) definiują valuewłaściwość , która odnosi się do „bieżącej wartości w kontrolce”.

<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>

Z dokumentów :

Uwaga: w przypadku niektórych typów danych wejściowych zwracana wartość może nie być zgodna z wartością wprowadzoną przez użytkownika. Na przykład, jeśli użytkownik wprowadzi wartość nienumeryczną do <input type="number">, zwrócona wartość może być pustym ciągiem.

Przykładowy skrypt

Oto przykład, który pokazuje wynik dla HTML przedstawionego powyżej:

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>

InnerTextwłaściwość html-koduje zawartość, przechodząc <p>do <p>itp. Jeśli chcesz wstawić tagi HTML, musisz użyć InnerHTML.

W prostych słowach:

1. innerTextpokaże wartość taką jaka jest i ignoruje wszelkie HTMLformatowanie, które może być uwzględnione.
2. innerHTMLpokaże wartość i zastosuje dowolne HTMLformatowanie.

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

Aby na przykład go udoskonalić i odzyskać wartość Alec, użyj innego .childNodes [1]

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

Pod względem MutationObserversustawienia ustawienie innerHTMLpowoduje childListmutację z powodu usunięcia węzła przez przeglądarki, a następnie dodania nowego węzła o wartości innerHTML.

Jeśli ustawisz innerText, characterDatagenerowana jest mutacja.

Jedyną różnicą między innerTexti innerHTMLjest to, że innerTextwstawia ciąg znaków w elemencie, a innerHTMLuruchamia go jako zawartość 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>

InnerTextzwróci tylko wartość tekstową strony z każdym elementem w nowym wierszu w postaci zwykłego tekstu, podczas gdy innerHTMLzwróci treść HTML wszystkiego wewnątrz bodyznacznika i childNodeszwróci listę węzłów, jak sugeruje nazwa.

innerTextWłaściwość zwraca tekście wartości elementu html natomiast innerHTMLzwraca HTML content. Przykład poniżej:

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>

aby dodać do listy, innerText zachowa twoją transformację tekstu, innerHTML wont