Mengubah Blockquote Tag Menjadi Pre Code Tag dengan JavaScript

Ilustrasi Blockquote. Foto : UI Fresh

Dalam pengembangan web, sering kali kita perlu mengubah struktur dan tampilan elemen HTML untuk memenuhi kebutuhan desain atau fungsionalitas tertentu. Salah satu tugas yang mungkin perlu kita lakukan adalah mengubah elemen `<blockquote>` menjadi elemen `<pre>` dengan kelas `<code>` menggunakan JavaScript. Dalam artikel ini, kita akan membahas cara melakukan hal ini dengan JavaScript.

Elemen `<blockquote>` digunakan untuk menandai kutipan atau teks yang dikutip dari sumber lain. Namun, jika kita ingin menampilkan kode atau contoh program dalam kutipan, elemen `<pre>` dengan kelas `<code>` akan lebih sesuai. Oleh karena itu, kita perlu mengubah elemen `<blockquote>` menjadi elemen `<pre>` dengan kelas `<code>` menggunakan JavaScript.

Berikut adalah langkah-langkah yang perlu diikuti untuk mencapai hal ini

Langkah 1: Mendapatkan elemen-elemen yang akan diubah

Pertama, kita perlu mendapatkan semua elemen `<blockquote>` di dalam dokumen HTML. Hal ini dapat dilakukan dengan menggunakan metode `querySelectorAll()` yang akan mengembalikan daftar elemen yang cocok dengan selektor CSS yang diberikan. Dalam kasus ini, selektornya adalah `"blockquote"`.

const blockquotes = document.querySelectorAll('blockquote'); 

Langkah 2: Membuat elemen `<pre>` dan `<code>` baru

Kedua, kita perlu membuat elemen `<pre>` dan `<code>` baru untuk menggantikan elemen `<blockquote>`. Ini bisa dilakukan dengan menggunakan metode `createElement()` untuk membuat elemen baru dan `createTextNode()` untuk membuat node teks yang akan dimasukkan ke dalam elemen `<code>`.

blockquotes.forEach(blockquote => {
  const pre = document.createElement('pre');
  const code = document.createElement('code');
  const text = document.createTextNode(blockquote.textContent);

  code.appendChild(text);
  pre.appendChild(code);
  blockquote.parentNode.replaceChild(pre, blockquote);
});
 

Langkah 3: Menambahkan kelas `<code>` ke elemen `<pre>`

Terakhir, kita perlu menambahkan kelas `<code>` ke elemen `<pre>` yang baru dibuat. Ini bisa dilakukan dengan menggunakan metode `classList.add()`.

 pre.classList.add('code');

Setelah menyelesaikan ketiga langkah di atas, elemen `<blockquote>` akan digantikan dengan elemen `<pre>` yang berisi elemen `<code>`. Selain itu, elemen `<pre>` juga akan memiliki kelas `<code>` yang berguna untuk mengaplikasikan gaya tertentu.

Berikut adalah contoh lengkap implementasi JavaScript untuk mengubah elemen `<blockquote>` menjadi elemen `<pre>` dengan kelas `<code>`:

 const blockquotes = document.querySelectorAll('blockquote');

blockquotes.forEach(blockquote => {
  const pre = document.createElement('pre');
  const code = document.createElement('code');
  const text = document.createTextNode(blockquote.textContent);

  code.appendChild(text);
  pre.appendChild(code);
  blockquote.parentNode.replaceChild(pre, blockquote);

  pre.classList.add('code');
});

Dalam contoh di atas, kita menggunakan metode `querySelectorAll()` untuk mendapatkan semua elemen `<blockquote>`, kemudian menggunakan metode `forEach()` untuk melakukan iterasi pada setiap elemen dan menerapkan perubahan yang diperlukan.

Perhatikan bahwa contoh di atas mengasumsikan bahwa Anda telah menentukan gaya CSS untuk kelas `<code>`. Anda dapat menyesuaikan gaya sesuai dengan kebutuhan desain Anda.

Setelah Anda menambahkan skrip JavaScript di atas ke halaman web Anda, ketika halaman tersebut dimuat, semua elemen `<blockquote>` akan diubah menjadi elemen `<pre>` dengan kelas `<code>`. Ini akan memungkinkan Anda untuk menampilkan kode atau contoh program dengan cara yang lebih sesuai.

Selain itu, jika Anda ingin memperluas fungsionalitas ini dengan mengubah elemen `<blockquote>` yang memiliki atribut khusus atau pola tertentu, Anda dapat menyesuaikan kode JavaScript di atas. Misalnya, Anda dapat menggunakan metode `querySelectorAll()` dengan selektor yang lebih spesifik untuk memilih hanya elemen `<blockquote>` dengan atribut atau pola tertentu.

const blockquotes = document.querySelectorAll('blockquote[data-lang="javascript"]');
 

Dalam contoh di atas, kami menggunakan atribut `data-lang` dengan nilai `"javascript"` untuk memilih hanya elemen `<blockquote>` yang memiliki atribut tersebut dan bernilai `"javascript"`. Anda dapat mengubah atribut dan nilainya sesuai dengan kebutuhan Anda.

Penutup

Dengan menggunakan teknik ini, Anda dapat mengubah elemen `<blockquote>` menjadi elemen `<pre>` dengan kelas `<code>` secara dinamis menggunakan JavaScript. Hal ini memberikan fleksibilitas dalam mengatur tampilan dan fungsionalitas halaman web Anda.

Semoga artikel ini memberikan pemahaman yang jelas tentang cara mengubah elemen `<blockquote>` menjadi elemen `<pre>` dengan kelas `<code>` menggunakan JavaScript. Dengan menerapkan teknik ini, Anda dapat meningkatkan tampilan dan fungsi halaman web Anda yang berisi kode atau contoh program.