Perbedaan antara innerText dan innerHTML

Apa perbedaan antara innerHTML, innerTextdan childNodes[].valuedalam JavaScript?

innerTextNamun, tidak seperti yang lain , innerHTMLAnda dapat bekerja dengan teks kaya HTML dan tidak secara otomatis menyandikan dan mendekode teks. Dengan kata lain, innerTextmengambil dan menetapkan konten tag sebagai teks biasa, sedangkan innerHTMLmengambil dan mengatur konten dalam format HTML.

Contoh di bawah ini merujuk ke cuplikan HTML berikut:

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

Node akan dirujuk oleh JavaScript berikut:

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

element.innerHTML

Menyetel atau mendapatkan sintaks HTML yang menjelaskan turunan elemen

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

Ini adalah bagian dari Spesifikasi Parsing dan Serialisasi DOM W3C . Perhatikan itu milik Elementbenda.

node.innerText

Menetapkan atau mendapatkan teks antara tag awal dan akhir objek

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

• innerTextdiperkenalkan oleh Microsoft dan untuk sementara tidak didukung oleh Firefox. Pada bulan Agustus 2016, innerTexttelah diadopsi oleh WHATWG dan ditambahkan ke Firefox di v45.
• innerText memberi Anda representasi sadar-gaya dari teks yang mencoba mencocokkan apa yang dirender oleh browser ini artinya:
  • innerTextberlaku text-transformdan white-spaceaturan
  • innerText memotong ruang putih di antara garis dan menambahkan jeda baris di antara item
  • innerText tidak akan mengembalikan teks untuk item yang tidak terlihat
• innerTextakan kembali textContentuntuk elemen yang tidak pernah dirender seperti <style />dan `
• Properti Nodeelemen

node.textContent

Mendapat atau menetapkan konten teks dari sebuah node dan turunannya.

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

Meskipun ini adalah standar W3C , itu tidak didukung oleh IE <9.

• Tidak mengetahui gaya dan karenanya akan mengembalikan konten yang disembunyikan oleh CSS
• Tidak memicu reflow (karena itu lebih banyak performan)
• Properti Nodeelemen

node.value

Ini tergantung pada elemen yang Anda targetkan. Untuk contoh di atas, xmengembalikan objek HTMLDivElement , yang tidak memiliki valueproperti yang ditentukan.

x.value // => null

Tag input ( <input />), misalnya, mendefinisikan valueproperti , yang merujuk pada "nilai saat ini dalam kontrol".

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

Dari dokumen :

Catatan: untuk jenis input tertentu, nilai yang dikembalikan mungkin tidak cocok dengan nilai yang dimasukkan pengguna. Misalnya, jika pengguna memasukkan nilai non-numerik ke dalam <input type="number">, nilai yang dikembalikan mungkin berupa string kosong.

Contoh Script

Berikut ini contoh yang menunjukkan output untuk HTML yang disajikan di atas:

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>

InnerTextproperti html-mengkodekan konten, beralih <p>ke <p>, dll. Jika Anda ingin memasukkan tag HTML yang perlu Anda gunakan InnerHTML.

Dengan kata sederhana:

1. innerTextakan menampilkan nilai apa adanya dan mengabaikan HTMLpemformatan apa pun yang mungkin disertakan.
2. innerHTMLakan menunjukkan nilai dan menerapkan HTMLpemformatan apa pun .

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

Untuk lebih mempersempitnya dan mengambil nilai Alec misalnya, gunakan .childNodes lain [1]

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

Dalam hal MutationObservers, pengaturan innerHTMLmenghasilkan childListmutasi karena browser menghapus simpul dan kemudian menambahkan simpul baru dengan nilai innerHTML.

Jika Anda mengatur innerText, characterDatamutasi dihasilkan.

Satu-satunya perbedaan antara innerTextdan innerHTMLadalah innerTextmemasukkan string seperti itu ke dalam elemen, sementara innerHTMLmenjalankannya sebagai konten 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>

InnerTexthanya akan mengembalikan nilai teks halaman dengan setiap elemen pada baris baru dalam teks biasa, sementara innerHTMLakan mengembalikan konten HTML dari segala sesuatu di dalam bodytag, dan childNodesakan mengembalikan daftar node, seperti namanya.

The innerTextproperti mengembalikan teks yang sebenarnya nilai dari suatu elemen html sedangkan innerHTMLmengembalikan HTML content. Contoh di bawah ini:

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>

untuk ditambahkan ke daftar, innerText akan membuat transformasi teks Anda, innerHTML tidak akan terjadi