Penggunaan dan perbezaan innerHTML, innerText dan outerHTML dalam kemahiran JavaScript_javascript

Tiada lagi perkara karut, sila lihat contoh di bawah.

Penggunaan:

<div id="test"> 
 <span style="color:red">test1</span> test2 
</div>

Boleh digunakan dalam JS:

test.innerHTML:

Iaitu, keseluruhan kandungan dari kedudukan permulaan hingga kedudukan akhir objek, termasuk tag Html.

Nilai test.innerHTML dalam contoh di atas ialah “0bbd5cc33b622ada7b9ba1b438e60276test154bdf357c58b8a65c66d7c19c8e4d114

test.innerTeks:

Kandungan dari kedudukan permulaan ke kedudukan akhir, tetapi ia mengalih keluar tag Html

Nilai text.innerTest dalam contoh di atas ialah "test1 test2", dengan teg span dialih keluar.

test.outerHTML:

Selain mengandungi keseluruhan kandungan innerHTML, ia juga mengandungi teg objek itu sendiri.

Nilai text.outerHTML dalam contoh di atas juga

<div id="test"><span style="color:red">test1</span> test2</div>

Contoh penuh:

<div id="test"> 
 <span style="color:red">test1</span> test2 
</div>
innerHTML内容
inerHTML内容
outerHTML内容

Arahan khas:

InnerHTML ialah atribut yang mematuhi piawaian W3C, manakala innerText hanya terpakai kepada pelayar IE Oleh itu, gunakan innerHTML sebanyak mungkin dan kurangkan innerText Jika anda ingin mengeluarkan kandungan yang tidak mengandungi tag HTML, anda boleh menggunakan innerHTML untuk mendapatkan HTML yang mengandungi Selepas mengalih keluar kandungan teg, gunakan ungkapan biasa untuk mengalih keluar teg HTML Berikut ialah contoh mudah yang mematuhi piawaian W3C:

<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+&#63;>/gim,''))">无HTML,符合W3C标准</a>

Bagaimana untuk membezakan innerHTML dan innerText?

Kod sampel:

<div id="test"> 
<span style="color:red">test1</span> test2 
</div> 
<a 
href="javascript:alert(test.innerHTML)">innerHTML内容</a> 
<a 
href="javascript:alert(test.innerText)">inerHTML内容</a> 

Mata biasa: innerHTML dan innerText akan menggantikan kandungan dalam elemen.

Perbezaan:

1, innerHTML:

Iaitu, keseluruhan kandungan dari kedudukan permulaan hingga kedudukan akhir objek, termasuk tag Html.

Nilai test.innerHTML dalam contoh di atas ialah "0bbd5cc33b622ada7b9ba1b438e60276test154bdf357c58b8a65c66d7c19c8e4d114
ujian2”.

2, innerTeks:

Kandungan dari kedudukan permulaan ke kedudukan akhir, tetapi ia mengalih keluar tag Html

Nilai text.innerTest dalam contoh di atas ialah "test1 test2", dengan teg span dialih keluar.

Perlu diperhatikan bahawa innerHTML ialah atribut yang mematuhi piawaian W3C, manakala innerText hanya terpakai untuk pelayar IE, gunakan innerHTML sebanyak mungkin dan kurangkan innerText jika anda ingin mengeluarkan kandungan tanpa teg HTML boleh Selepas menggunakan innerHTML untuk mendapatkan kandungan yang mengandungi teg HTML, gunakan ungkapan biasa untuk mengalih keluar teg HTML.

Di atas ialah pengenalan kepada penggunaan dan perbezaan innerHTML, innerText dan outerHTML dalam JavaScript. Saya harap anda menyukainya.