Penggunaan fungsi TEXTCONTENT pada PHP

Pada kesempatan kali ini saya akan menjelaskan perbedaan innerText dan innerHTML di javascript. Perlu teman-teman ketahui sebelumnya innerText dan innerHTML adalah salah satu property dari JavaScript dimana fungsi dari keduanya sama-sama untuk menentukan dan mengembalikan nilai konten dari suatu element, namun dari keduanya terdapat perbedaan yang cukup signifikan. Jika pada property innerText fungsinya adalah untuk menentukan dan mengembalikan nilai konten dari suatu element dalam bentuk text atau string sedangkan untuk innerHTML fungsinya adalah untuk menentukan dan mengembalikan nilai konten dari suatu element dalam bentuk text atau string berikut dengan tag html didalamnya nya.

Table of Contents Show

getElementById untuk apa?
Apa yang dimaksud dengan DOM manipulation?
Apa yang dimaksud dengan DOM?
Apa itu DOM Javascript dan bagaimana model implementasinya?

Sebagai contoh saya memiliki struktur html list seperti berikut :

<ul>

</ul>

Dari struktur html tersebut saya hanya ingin mengambil konten atau text nya saja yang ada didalam tag html <li> , maka untuk penggunaan dari kedua property tersebut lebih tepatnya adalah dengan menggunakan property innerText. Untuk membuktikannya, kalian bisa ikuti tahapan saya dibawah ini.

Berikut Tahapannya :

Teman-teman buat terlebih dahulu satu buah file dengan nama index-text.html, ketikan kode seperti berikut :

<!DOCTYPE html>

<head>

<title>Cara Mendapatkan Semua Text Element List Di JavaScript</title>

</head>

<body>

<ul>

</ul>

</body>

let ulAll=document.getElementsByTagName("li");

let urut=1;

for(vari=0;i<ulAll.length;i++){

if(urut<= 5){

ulAll[i].innerText ='List '+urut;

}else{

ulAll[i].innerText = '<a href="#" style="color:red;text-decoration:none;">List '+urut+'</a>';

}

urut++;

}

</script>

</html>

Jika sudah save file tersebut. Dan lihat hasilnya di browser.
Selanjutnya Teman-teman buat lagi satu buah file dengan nama index-html.html, ketikan kode seperti berikut :

<!DOCTYPE html>

<head>

<title>Cara Mendapatkan Semua Text Element List Di JavaScript</title>

</head>

<body>

<ul>

</ul>

</body>

let ulAll=document.getElementsByTagName("li");

let urut=1;

for(vari=0;i<ulAll.length;i++){

if(urut<= 5){

ulAll[i].innerHTML ='List '+urut;

}else{

ulAll[i].innerHTML = '<a href="#" style="color:red;text-decoration:none;">List '+urut+'</a>';

}

urut++;

}

</script>

</html>

Jika sudah save file tersebut. Dan lihat hasilnya di browser.

Dari hasil kedua file tersebut terlihat jelas, jika menggunakan innerText meskipun didalam list tersebut terdapat tag-tag html maka akan diabaikan dan ditampilkan dalam format text biasa sedangkan jika menggunakan innerHTML akan menerjemahkan tag-tag yang ada didalam list tersebut dalam bentuk outuput html.

Sampai disini penjelasna saya mengenai perbedaan innerText dan innerHTML di javascript, semoga bermanfaat.

getElementById untuk apa?

getElementById() fungsi untuk memilih elemen berdasarkan atribut id .

Apa yang dimaksud dengan DOM manipulation?

“DOM atau Document Object Model merupakan objek JavaScript spesial yang hanya ada di environment Browser. Objek ini digunakan untuk mendapatkan struktur dokumen website, bahkan memanipulasinya.”

Apa yang dimaksud dengan DOM?

Document Object Model (DOM) adalah sebuah antarmuka pemrograman (programing interface) untuk HTML, XML dan SVG yang bersifat lintas platform dan language-independent. Sebuah peramban web tidak harus menggunakan DOM untuk menampilkan dokumen HTML.

Apa itu DOM Javascript dan bagaimana model implementasinya?

Javascript DOM (Document Object Model) adalah interface yang memungkinkan developer untuk memanipulasi konten, struktur, dan style situs web. Jika Anda ingin mempelajari lebih dalam tentang DOM dan bagaimana Anda dapat memanipulasinya menggunakan Javascript, berikut referensi dasar menurut Gabriel Tanner.