Kapan saya harus menggunakan innerhtml?

Properti innerHTML adalah bagian dari Document Object Model (DOM) yang digunakan untuk mengatur atau mengembalikan konten HTML suatu elemen. Di mana nilai pengembalian mewakili konten teks dari elemen HTML. Ini memungkinkan kode JavaScript untuk memanipulasi situs web yang sedang ditampilkan. Lebih khusus lagi, ini menetapkan atau mengembalikan konten HTML (HTML bagian dalam) dari suatu elemen. Properti innerHTML banyak digunakan untuk memodifikasi konten halaman web karena merupakan cara termudah untuk memodifikasi DOM. Tapi ada beberapa kelemahan menggunakan innerHTML di JavaScript

Artikel berikut memberikan garis besar untuk innerText vs innerHTML. innerText dan innerHTML adalah properti JavaScript. properti innerText mengembalikan teks biasa dan menghapus spasi, dan memiliki kompatibilitas. innerHtml menampilkan konten antar label, termasuk konten teks dan tag dan didukung oleh semua browser. Html adalah bahasa markup yang digunakan untuk pengembangan halaman web. innerHtml ini akan disajikan untuk mengganti tag dan konten yang dipilih

Perbandingan Head to Head Antara innerText vs innerHTML (Infografis)

Di bawah ini adalah 9 perbedaan teratas antara innerText vs innerHTML

Kapan saya harus menggunakan innerhtml?

Perbedaan Kunci Antara innerText vs innerHTML

Mari kita bahas beberapa perbedaan utama antara innerText vs innerHTML

Mulai Kursus Pengembangan Perangkat Lunak Gratis Anda

Pengembangan web, bahasa pemrograman, pengujian Perangkat Lunak & lainnya

Paket Pengembangan Perangkat Lunak Semua dalam Satu(600+ Kursus, 50+ proyek)

Kapan saya harus menggunakan innerhtml?
Kapan saya harus menggunakan innerhtml?
Kapan saya harus menggunakan innerhtml?
Kapan saya harus menggunakan innerhtml?

Kapan saya harus menggunakan innerhtml?
Kapan saya harus menggunakan innerhtml?
Kapan saya harus menggunakan innerhtml?
Kapan saya harus menggunakan innerhtml?

Harga
Lihat Kursus

600+ Kursus Daring. 50+ proyek. 3000+ Jam. Sertifikat yang Dapat Diverifikasi. Akses Seumur Hidup
4. 6 (86.629 peringkat)

  • Perbedaan ditangani di mana teks ditangani. innerText sangat mirip dengan textContent. Namun, innerText menyisipkan string sebagai masukan ke elemen sementara innerHTML menjalankan dan mengeksekusi elemen sebagai konten HTML
  • innerHtml berfungsi dengan teks kaya HTML, dan mereka tidak melakukan penyandian dan dekode teks secara otomatis. innerText merender konten teks sementara HTML bagian dalam mem-parsing entitas HTML di dalam elemen
  • innerText tidak berfungsi di semua browser karena tidak valid di Firefox dan kemudian ditambahkan ke Firefox v45
  • innerHtml rentan terhadap serangan XSS, tetapi tidak demikian halnya di InnerText. Alih-alih, menggunakan inner Html menyebabkan browser web mem-parse ulang semua elemen DOM yang tersedia di dalam kode HTML. Dengan kata lain, membuat elemen baru dan menambahkan DOM memberikan kinerja yang lebih baik
  • innerText menerapkan representasi sadar gaya dan memberikan transformasi gaya. Untuk semua maksud, innerText secara signifikan lebih lambat. Untuk kesadaran gaya, kita bisa menggunakan inner Html sebagai gantinya
  • innerText mencari beberapa informasi dari sistem tata letak untuk menjelaskan bagaimana teks ditampilkan kepada pengguna. Ini membuat kinerja aplikasi menjauh dari rel

Contoh innerText vs innerHTML

Diberikan di bawah ini adalah contoh innerText vs innerHTML

Jadi di sini, kita perlu mengekstrak teks dari elemen HTML. Ini adalah contoh cepat yang dapat kami coba di editor mana pun yang dipilih

Contoh 1

Kode

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Javascript Properties</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.output,
.start1 {
font-size: 16px;
font-weight: 400;
color: blue;
}
</style>
</head>
<body>
<h1> Demo on innerHTML vs innerText</h1>
<div class="start1">Hi <b>Guys</b> <i>Welcome to EDUCBA</i></div>
<div class="output">innerHTMLclass =</div>
<div class="output">innerTextclass =</div>
<button class="Click_Btn">Press here</button>
<h3>Press above button to see the working Process</h3>
<script>
let Bn = document.querySelector(".Click_Btn");
let res = document.querySelectorAll(".output");
let startel = document.querySelector(".start1");
let x;
BtnEle.addEventListener("click", () => {
res[0].innerHTMLclass += startel.innerHTMLclass;
res[1].innerHTMLclass +=startel.innerTextclass;
});
</script>
</body>
</html>

Penjelasan

  • Dalam kode di atas, kita perlu mengekstrak bagian teks satu per satu dan, di kelas lain, juga tag HTML. Jadi kami telah menulis beberapa kode JavaScript untuk mengambil proses kerja

Keluaran

Kapan saya harus menggunakan innerhtml?

Contoh #2

Kode

<h3>Source element:</h3>
<p id="original">
<style>#original { color: blue; } #text { text-transform: lowercase; }</style>
<span id=text>Easiest way<br>to learn the course<br>is followed
below.</span>
<span style="display:none">No Content</span>
</p>
<h3>Output of TextContent Property:</h3>
<textarea id="textdemo" rows="6" cols="30" readonly>...</textarea>
<h3>Output of innerText:</h3>
<textarea id="innerTextdemo" rows="6" cols="30" readonly>...</textarea>
_

js

const original = document.getElementById("original");
const textdemo = document.getElementById("textdemo");
const innerTextdemo = document.getElementById("innerTextdemo");
textdemo.value = original.textContent;
innerTextdemo.value = original.innerText;

Contoh #3

Kode

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample Document</title>
</head>
<body>
<div id="newb">
<p>This is EDUCBA</p>
<p>This is EDUCBA</p>
<p>This is EDUCBA</p>
</div>
</body>
<script>
var b1 = document.getElementById("b1");
console.log(ss1);
</script>
</html>

Penjelasan

  • Kode di atas mencetak konten di area Teks dengan properti innerText

Keluaran

Kapan saya harus menggunakan innerhtml?

Contoh #4

Kode

<html>
<script type="text/javascript">
<!--
function dobutton(val1){
var ob = document.getElementById("zy");
if(val1==1){
ob.innerText = "<h4 style='color:brown;'>Hi learners</h4>";
}else{
ob.innerHTML = "<h4 style='color:blue;'>Hi Learners</h4>";
}
}
</script>
</head>
<body class="body">
<div id="zy">
</div>
<form id="frm" action="" onsubmit="">
<input type="text" name="tt"/>
<input type="button" value="innerText" onclick="dobutton(1)"/>
<input type="button" value="innerHTML" onclick="dobutton(2)"/>
</form>
</html>
_

Penjelasan

  • Cuplikan JavaScript di atas menunjukkan bahwa saat kita menekan tombol, hasil yang sesuai dengan teks dan tag HTML ditampilkan

Keluaran

Kapan saya harus menggunakan innerhtml?

tabel perbandingan innerText vs innerHTML

Mari kita bahas perbandingan teratas antara innerText vs innerHTML

Sr. NoinnerText innerHTMLDefinitionKetika dilakukan pada suatu elemen, ia mengembalikan teks, dan bagian teks dibungkus oleh elemen sementara itu mengabaikan spasi. Hal yang baik adalah teks dipilih dan disalin dari halaman (pilihan yang diperketat). innerHTML mengembalikan atau menyetel bagian teks bersama dengan tag HTML, dan spasi dipertimbangkan. Mereka memperlakukan elemen dalam HTML dengan mengambil atribut sebagai fitur. DevelopedinnerText diperkenalkan oleh Microsoft, dan itu bukan standar. Diperkenalkan oleh Microsoft. Karakter (dan) ,(< ,>) dikembalikan sebagai entitas HTML. Sintaks. innerTexta. innerHtmlCSSIt tidak mengembalikan teks yang disembunyikan dengan elemen CSS. Setelah diatur, data karakter dihasilkan. Tidak termasuk tag pembuka dan penutup. Ini mengembalikan teks yang disematkan di dalam elemen CSS. Tapi di sini, data karakter saja tidak dihasilkan. Itu termasuk tag pembuka dan penutup. Tag HTML Tag HTML tidak dapat disisipkan. Mereka sangat mirip dengan konten teks. Tag HTML dapat dimasukkan ke dalam kode. Mereka tidak mirip dengan konten teks. Bagian penting dari browser kode. DomElement(“//div[@id=’mydemo’]”). GetProperty(“innerText”) browser. DomElement(“//div[@id=’mydemo’]”). GetProperty(“innerHtml”)AdvantageHere atribut mengembalikan konten teks dan keturunannya, yang secara tepat mewakili persis bagaimana konten teks muncul di halaman. Ini adalah fitur yang berguna dan dibutuhkan di jQuery. Saat kita perlu menambahkan atribut ke elemen, Html bagian dalam dianggap lebih bersih. Kekurangan Ini memerlukan beberapa tata letak informasi sistem saat mengembalikan teks, yang menurunkan kinerja. Membutuhkan Pengetahuan Tata Letak yang mahal. Ini memiliki serangan keamanan lintas situs. Data hanya digunakan; . Contoh


Hello web developersShiv Om How you doing?


misalkan p = dokumen. getElementById('CourseInstructor');

menghibur. log (hal. teks dalam)

Keluaran

Halo pengembang web, Shiv Bagaimana kabarmu?


Hello web developers, Shiv Om How you doing?


misalkan p = dokumen. getElementById(' premium”>');

menghibur. log (hal. teks dalam)

Keluaran


Hello web developers Shiv How you doing?


Kesimpulan

Oleh karena itu, dalam artikel ini, kita telah melihat perbedaan antara inner Html dan innerText saat kita memanipulasi kode JavaScript. Artikel ini menyoroti perbandingan, dan juga, Anda akan mendapatkan gambaran tentang proses kerja saat Anda memilih konten menggunakan innerText dan innerHtml dalam kode JavaScript. Sebagai kesimpulan, layanan pengembangan web merender halaman web apa pun dan memperkenalkan konten baru ke aplikasi mereka memerlukan konsep dasar

Artikel yang Direkomendasikan

Ini adalah panduan untuk innerText vs innerHTML. Di sini kita masing-masing membahas perbedaan utama dengan infografis, tabel perbandingan, dan contoh. Anda juga dapat melihat artikel berikut untuk mempelajari lebih lanjut –

Apakah praktik yang baik untuk menggunakan innerHTML?

Penggunaan innerHTML menciptakan potensi risiko keamanan untuk situs web Anda . Pengguna jahat dapat menggunakan skrip lintas situs (XSS) untuk menambahkan skrip sisi klien jahat yang mencuri informasi pribadi pengguna yang disimpan dalam cookie sesi.

Apa tujuan utama dari innerHTML?

Properti innerHTML menyetel atau mengembalikan konten HTML (HTML dalam) dari suatu elemen .

Mengapa Anda tidak menggunakan innerHTML?

Dapat merusak dokumen . Tidak ada validasi yang tepat yang disediakan oleh innerHTML, jadi kode HTML apa pun yang valid dapat digunakan. Ini dapat merusak dokumen JavaScript. Bahkan HTML yang rusak dapat digunakan, yang dapat menyebabkan masalah yang tidak terduga.

Haruskah Anda menggunakan innerHTML atau InnerText?

Properti InnerText html-mengkodekan konten, mengubah Jika Anda ingin menyisipkan tag HTML, Anda harus menggunakan InnerHTML . Hanya untuk kejelasan. Ini hanya berlaku saat SETTING nilai. Saat Anda MENDAPATKAN nilai, tag HTML dihapus begitu saja dan Anda mendapatkan teks biasa.