İnnerText ve innerHTML arasındaki fark

Arasındaki fark nedir innerHTML, innerTextve childNodes[].valueJavaScript?

Aksine innerTextolsa da, innerHTMLHTML zengin metin ile çalışmayı sağlar ve otomatik olarak kodlamak ve kod çözme metni yok. Başka bir deyişle, innerTextetiketin içeriğini düz metin olarak innerHTMLalır ve ayarlar, içeriği HTML biçiminde alır ve ayarlar.

Aşağıdaki örnekler aşağıdaki HTML snippet'ini gösterir:

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

Düğüme aşağıdaki JavaScript tarafından referans verilecektir:

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

element.innerHTML

Öğenin torunlarını açıklayan HTML sözdizimini ayarlar veya alır

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

Bu, W3C'nin DOM Ayrıştırma ve Serileştirme Spesifikasyonunun bir parçasıdır . ElementNesnelerin bir özelliği olduğunu unutmayın .

node.innerText

Nesnenin başlangıç ​​ve bitiş etiketleri arasındaki metni ayarlar veya alır

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

• innerTextMicrosoft tarafından tanıtıldı ve bir süredir Firefox tarafından desteklenmedi. 2016 Ağustos ayında, innerTextoldu WHATWG tarafından kabul ve V45 de Firefox eklendi.
• innerText size tarayıcı tarafından oluşturulanlarla eşleşmeye çalışan metnin stil farkında, temsilini verir:
  • innerTextgeçerlidir text-transformve white-spacekurallar
  • innerText satırlar arasındaki boşluğu keser ve öğeler arasına satır sonları ekler
  • innerText görünmez öğeler için metin döndürmez
• innerTexttextContentasla oluşturulmamış öğeler için geri dönecek <style />ve
• Mülkiyeti Nodeelemanları

node.textContent

Bir düğümün ve alt öğelerinin metin içeriğini alır veya ayarlar.

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

Bu bir W3C standardı olsa da IE <9 tarafından desteklenmez.

• Stilin farkında değildir ve bu nedenle CSS tarafından gizlenen içeriği döndürür
• Bir yeniden akış tetiklemez (bu nedenle daha fazla performans)
• Mülkiyeti Nodeelemanları

node.value

Bu, hedeflediğiniz öğeye bağlıdır. Yukarıdaki örnek için, tanımlanmış bir özelliği olmayan xbir HTMLDivElement nesnesi döndürür value.

x.value // => null

<input />Örneğin, giriş etiketleri ( ), "denetimdeki geçerli değer" anlamına gelen bir valueözellik tanımlar .

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

Gönderen docs :

Not: belirli giriş türleri için döndürülen değer, kullanıcının girdiği değerle eşleşmeyebilir. Örneğin, kullanıcı bir değerine sayısal olmayan bir değer girerse <input type="number">, döndürülen değer bunun yerine boş bir dize olabilir.

Örnek Komut Dosyası

Yukarıda sunulan HTML için çıktıyı gösteren bir örnek:

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>

InnerTextmülkiyet dönüm, içerik html kodlar <p>için <p>size kullanmak gerekir HTML etiketleri eklemek istiyorsanız, vb InnerHTML.

Basit bir deyişle:

1. innerTextdeğeri olduğu gibi gösterir ve HTMLdahil edilebilecek tüm biçimlendirmeleri yoksayar .
2. innerHTMLdeğeri gösterecek ve HTMLbiçimlendirme uygulayacaktır .

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

Daha da hassaslaştırmak ve örneğin Alec değerini almak için başka bir .childNodes [1] kullanın

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

Açısından MutationObservers, ayar düğümü kaldıran ve sonra değerine yeni bir düğüm ekleyen tarayıcılar nedeniyle innerHTMLbir childListmutasyon oluşturur innerHTML.

Ayarlarsanız innerText, bir characterDatamutasyon oluşturulur.

Arasındaki tek fark innerTextve innerHTMLolmasıdır innerTexto elemanın içine olduğu gibi iken, dize ekleyin innerHTMLkoşmak o html içerik olarak.

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>

InnerTextsayfanın metin değerini yalnızca her satırda yeni bir satırda düz metin olarak innerHTMLdöndürürken, bodyetiketin içindeki her şeyin HTML içeriğini childNodesdöndürür ve adından da anlaşılacağı gibi düğümlerin bir listesini döndürür.

innerTextMülkiyet döndüren gerçek metin ise bir html öğesinin değerini innerHTMLdöndürür HTML content. Aşağıdaki örnek:

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>

listeye eklemek için innerText, metin dönüşümünüzü koruyacaktır, innerHTML alışkanlık