innerText vs innerHTML vs label vs teks vs textContent vs outerText

Saya memiliki daftar dropdown yang diisi oleh Javascript.

Saat memutuskan apa yang seharusnya menjadi nilai default untuk ditampilkan saat dimuat, saya menyadari bahwa properti berikut menunjukkan nilai yang persis sama:

• innerText
• innerHtml
• label
• text
• textContent
• outerText

Penelitian saya sendiri menunjukkan tes penilaian atau perbandingan antara beberapa di antaranya, tetapi tidak semua.

Saya dapat menggunakan akal sehat saya sendiri dan memilih 1 atau yang lain karena memberikan hasil yang sama, tetapi, saya khawatir ini tidak akan menjadi ide yang baik jika datanya berubah.

Temuan saya adalah:

• innerText akan menunjukkan nilai sebagaimana adanya dan mengabaikan format HTML apa pun yang mungkin disertakan
• innerHTML akan menunjukkan nilai dan menerapkan format HTML apa pun
• labeltampaknya sama dengan innerText, jadi saya tidak bisa melihat perbedaannya
• texttampaknya sama innerTexttetapi versi singkatan jQuery
• textContenttampak sama innerTexttetapi tetap memformat (seperti \n)
• outerText tampaknya sama dengan innerText

Penelitian saya hanya dapat membawa saya sejauh saya hanya dapat menguji apa yang dapat saya pikirkan atau baca apa yang dipublikasikan, dapatkah ada orang yang mengkonfirmasi apakah penelitian saya benar dan jika ada sesuatu yang istimewa tentang labeldan outerText?

Dari MDN :

Internet Explorer memperkenalkan element.innerText. Maksudnya kurang lebih sama [seperti textContent] dengan beberapa perbedaan:

• Perhatikan bahwa sementara textContent mendapatkan konten dari semua elemen, termasuk <script>dan <style>elemen, properti khusus IE yang sebagian besar setara, innerText, tidak.

• innerText juga mengetahui gaya dan tidak akan mengembalikan teks elemen tersembunyi, sedangkan textContent akan mengembalikannya.

• Karena innerText mengetahui gaya CSS, ini akan memicu perubahan posisi, sedangkan textContent tidak.

Jadi innerTexttidak akan menyertakan teks yang disembunyikan oleh CSS, tapi textContentakan.

innerHTML mengembalikan HTML seperti namanya. Cukup sering, untuk mengambil atau menulis teks di dalam sebuah elemen, orang menggunakan innerHTML. textContent harus digunakan sebagai gantinya. Karena teks tidak diurai sebagai HTML, kemungkinan memiliki kinerja yang lebih baik. Selain itu, ini menghindari vektor serangan XSS.

Dalam kasus anda tidak terjawab itu, saya ulangi lebih jelas: Do tidak menggunakan .innerHTMLkecuali Anda secara khusus berniat untuk menyisipkan HTML dalam elemen dan telah mengambil tindakan pencegahan yang diperlukan untuk memastikan bahwa HTML Anda memasukkan tidak dapat berisi konten berbahaya. Jika Anda hanya ingin memasukkan teks, gunakan .textContentatau jika Anda perlu mendukung IE8 dan sebelumnya, gunakan deteksi fitur untuk mematikan antara .textContentdan .innerText.

Alasan utama adanya begitu banyak properti yang berbeda adalah karena browser yang berbeda awalnya memiliki nama yang berbeda untuk properti ini, dan masih belum ada dukungan lintas browser yang lengkap untuk semuanya. Jika Anda menggunakan jQuery, Anda harus tetap menggunakannya .text()karena itu dirancang untuk memuluskan perbedaan lintas-browser. *

Untuk beberapa yang lain: outerHTMLpada dasarnya sama dengan innerHTML, kecuali itu termasuk tag awal dan akhir dari elemen miliknya. Saya tidak bisa menemukan banyak penjelasan outerTextsama sekali. Saya pikir itu mungkin properti warisan yang tidak jelas dan harus dihindari.

Sebuah daftar dropdown terdiri dari sekumpulan Optionobjek, jadi Anda harus menggunakan .textproperti untuk memeriksa representasi tekstual dari elemen tersebut, yaitu

<option value="123">text goes here</option>
                    ^^^^^^^^^^^^^^

Btw,

.texttampaknya sama .innerTexttetapi versi singkatan JQuery

Itu tidak benar; $(element).text()adalah versi jQuery sedangkan element.textversi akses properti.

Tambahan untuk jawaban JLRishe yang sebaliknya sangat baik:

Alasan innerText dan outerText ada adalah karena simetri dengan innerHTML dan outerHTML. Ini menjadi penting saat Anda menugaskan ke properti.

Misalkan Anda memiliki elemen edengan kode HTML <b>Lorem Ipsum</b>:

e.innerHTML = "<i>Hello</i> World!"; => <b><i>Hello</i> World!</b>
e.outerHTML = "<i>Hello</i> World!"; =>    <i>Hello</i> World!
e.innerText = "Hello World!";        => <b>Hello World!</b>
e.outerText = "Hello World!";        =>    Hello World!

textContent tidak akan memformat (\ n)

Lihat kompatibilitas browser http://www.quirksmode.org/dom/html/ jika Anda menargetkan browser tertentu. Karena sepertinya mereka semua punya cara sendiri dalam melakukan sesuatu. Itulah mengapa lebih baik menggunakan JQuery .text () ( http://api.jquery.com/text/ ) jika Anda tidak ingin bermain-main.

textdan labelhapus spasi ekstra. Saya mendapatkan hasil ini saat menanyakan opsi dalam dropdown:

e.textContent = "A    B C   D     "
e.text = "A B C D"
e.label = "A B C D"