Bagaimana menulis kode html di dalam file javascript?

Untuk menampilkan konten yang sama di halaman berbeda di situs Anda, dengan HTML Anda harus menyisipkan konten tersebut secara manual di setiap halaman. Tetapi dengan JavaScript, Anda hanya perlu menyertakan potongan kode tanpa skrip server apa pun. JavaScript membuat pembaruan situs web besar menjadi lebih mudah. Yang perlu Anda lakukan hanyalah memperbarui satu skrip daripada setiap halaman di situs

Contoh kegunaan JavaScript dibandingkan HTML manual dapat dilihat pada pernyataan hak cipta yang muncul di setiap halaman situs web

Cara Menggunakan JavaScript untuk Menyisipkan Konten ke dalam HTML

Prosesnya sesederhana mendefinisikan file JavaScript lalu memanggilnya di dalam HTML melalui tag skrip

1. Tulis HTML yang ingin Anda ulangi dalam bentuk file JavaScript. Untuk penyisipan hak cipta sederhana, buat file dengan satu baris JS, misalnya

   document.write("Copyright Lifewire, all rights reserved.");
   

   Gunakan dokumen. tulis di mana pun Anda ingin skrip menyisipkan teks ke dalam dokumen HTML

2. Simpan file JavaScript ke direktori terpisah di bawah webroot Anda, ini biasanya termasuk direktori

   includes/copyright.js
   

   _

3. Buka editor HTML dan buka halaman web yang akan menampilkan keluaran JavaScript. Temukan lokasi di HTML tempat file penyertaan akan ditampilkan, dan tempatkan kode berikut di sana

4. Tambahkan kode yang sama ke setiap halaman yang relevan

5. Saat informasi hak cipta berubah, edit hak cipta. file js. Setelah Anda mengunggahnya, teks akan berubah di setiap halaman situs Anda secara otomatis

Kiat dan Saran

Jangan lupa dokumennya. tulis instruksi pada setiap baris HTML Anda di file JavaScript. Jika tidak, proses ini tidak akan berhasil

Sertakan HTML atau teks dalam JavaScript sertakan file. Apa pun yang dapat masuk dalam file HTML standar dapat masuk dalam file JavaScript termasuk. Demikian pula, JavaScript menyertakan pekerjaan di mana saja dalam dokumen HTML Anda, termasuk kepala. ​

Dokumen halaman web tidak akan menampilkan HTML yang disertakan, hanya panggilan ke skrip JavaScript

Kutip Artikel ini

Format

Kutipan Anda

Kirnin, Jennifer. "Cara Memasukkan HTML di Banyak Dokumen Menggunakan JavaScript. "PikirCo. https. // www. thinkco. com/html-in-many-docs-with-javascript-3468862 (diakses 3 Februari 2023)

Buat Elemen HTML div dalam JavaScript dengan memanggil metode createElement() pada objek dokumen

Metode ini mengambil argumen yang akan menjadi Elemen HTML

Dalam hal ini… div

const box = document.createElement("div");
box.id = "box";
document.body.appendChild(box);

Tetapkan ke kotak yang disebut konstanta

Setel properti id kotak ke 'kotak'

Tambahkan ke hierarki DOM dengan memanggil appendChild() pada dokumen. objek tubuh dengan kotak argumen

Mari tambahkan elemen anak ke elemen kotak

Untuk melakukannya, buat elemen HTML tombol di JavaScript dengan memanggil metode createElement() pada objek dokumen

Metode ini mengambil argumen…

tapi kali ini, tombol

Tetapkan ke tombol panggilan konstan

Tambahkan teks ke elemen tombol dengan menyetel nilai string ke properti innerHTML-nya

Tambahkan elemen tombol ke hierarki DOM dengan memanggil metode appendChild() pada dokumen. objek tubuh dengan tombol sebagai argumen

Untuk menambahkan atribut ID ke tombol, setel nilai string ke properti id dari tombol

const button = document.createElement('button');
button.innerText = 'Button';
button.id = 'button-1';
box.appendChild(button);

Terakhir, tambahkan elemen tombol ke elemen kotak

Panggil metode appendChild() pada kotak dengan meneruskan tombol sebagai argumen

Cobalah. ⛹️

Lihat Pena Buat Elemen HTML dalam JavaScript oleh Raja Tamil (@rajarajan) di CodePen

Obyek. Menetapkan()

Pelajari cara membuat Elemen HTML yang sama menggunakan Objek. menetapkan()

Panggil metode assign() pada objek di dalam appendChild()

Menetapkan metode membutuhkan dua argumen

• Elemen HTML DOM yang ingin kita buat
• Objek JavaScript tempat kita dapat menggunakan salah satu properti DOM seperti id, innerHTML, dll

document.body.appendChild(
  Object.assign(
    document.createElement('div'),
    { id : 'box'}
  )
)

Ini lebih mudah daripada pendekatan sebelumnya jika kita memiliki banyak properti

Untuk menambahkan elemen anak ke elemen kotak, yang harus kita lakukan hanyalah merantai appendChild() lainnya dengan elemen tombol

Yang lebih mudah dan lebih mudah dibaca daripada pendekatan pertama

document.body
  .appendChild(
  Object.assign(
    document.createElement('div'),
    { id:'box'}
  )
).appendChild(
  Object.assign(
    document.createElement('button'),
    { innerHTML : 'button' ,
      id:'button-1'
    }
  )
)

Cobalah. ⛹️

Lihat Pen Create HTML Element in JavaScript – 2 [EMBED] oleh Raja Tamil (@rajarajan) di CodePen

ES 6 Backtick

Pelajari cara menambahkan Elemen HTML yang sama ke hierarki DOM menggunakan back-tick ES6 yang sejauh ini merupakan cara termudah

Karena, Anda benar-benar dapat menulis kode HTML di dalam JavaScript yang sangat mudah dibaca dan dipelihara

Buat kotak yang disebut konstan dan tambahkan sepasang back-ticks. Tulis kode HTML Anda persis seperti yang Anda lakukan di dalam halaman HTML

Bisakah Anda menulis HTML dalam file JavaScript?

Bagaimana cara menulis kode HTML di dalam file js?