Cara Menambah Atribut Baru pada Tag HTML Secara Otomatis

Cara Menambah Atribut Baru pada Tag HTML Secara Otomatis menggunakan Pure JavaScript

Dalam sebuah elemen website, banyak sekali bahasa-bahasa yang awam didengar oleh orang. Contoh dasarnya adalah kata tag, atribut dan elemen. Ketiganya tersebut memiliki arti yang berbeda. Kali ini, saya akan sedikit membahas mengenai attribute HTML, yang mungkin anda pernah mendengarnya.

Apa itu Atribut HTML?

Atirbut HTML atau dalam bahasa Inggris adalah HTML Attribute merupakan informasi tambahan yang diberikan dalam sebuah tag HTML. Setiap atibute memiliki nama dan nilai yang ditulis seperti name="value", nilai value tersebut diapit oleh tanda kutip satu ataupun dua. 

Contoh:

<p class="hello"> lorem ipsum dolor sit amet </p>

class="hello" merupakan atribut HTML, di mana ada dalam sebuah tag <p> . Atribute sangat berguna dalam penggunaan website untuk memberikan informasi website. 

Menambahkan Attribute baru pada tag secara Otomatis

Sebenarnya, inti dari artikel yang saya buat ini adalah untuk membagikan tutorial mengenai cara menambahkan attribute baru pada sebuah tag secara otomatis, tanpa harus menginput awal. 

Ini merupakan pengalaman saya sendiri, di mana kala itu saya ingin menambahkan atribute class='notranslate' pada tag <pre>, namun tidak mungkin jika harus saya edit satu-persatu. Akhirnya saya menggunakan JavaScript untuk menambahkan attribute tersebut. 

JavaScript yang digunakan merupakan murni (pure) JavaScript, tanpa menggunakan jQuery ataupun yang lainnya. JavaScript ini bisa diterapkan pada Blogger maupun CMS lainnya.

Baca juga: Cara Share Facebook Artikel Terbaru Blogger secara Otomatis

Dalam JavaScript ini, saya mencontohkan jika anda ingin menambahkan attribute class="notranslate" pada tag <pre>. Anda bisa kembangkan sesuai dengan kebutuhan anda. Copy kode di bawah ini sebelum </body> pada template anda. 

<script type='text/javascript'>

//<![CDATA[

var pre = document.getElementsByTagName("PRE");



Object.values(pre).forEach((x)=>{

var att = document.createAttribute("class");

att.value = "notranslate";

x.setAttributeNode(att);

})



//]]>

</script>

Note: perhatikan kode yang ditandai kuning. Sesuaikan dengan kebutuhan anda
Cara kerja JavaScript di atas adalah dengan menggunakan document.getElementsByTagName dan memanggil tag yang dibutuhkan lalu menggunakan document.createAttribute untuk membuat atribute baru yang diinginkan.

Tentunya ini sangat berguna buat anda, jika anda membuat artikel Tutorial Blogging, namun ingin menambahkan attribute baru pada <pre> dalam tag HTML tanpa harus mengedit satu persatu.

Semoga bermanfaat :)