Cara mendapatkan html di javascript

Question

Metode getAttribute() dari antarmuka Element mengembalikan nilai atribut tertentu pada elemen

Nội dung chính Show

Bagaimana cara mendapatkan konten HTML dalam JavaScript?
Bagaimana cara menambahkan HTML dalam JavaScript?
Bisakah Anda menghasilkan HTML dengan JavaScript?

Jika atribut yang diberikan tidak ada, nilai yang dikembalikan adalah null atau "" (string kosong);

getAttribute(attributeName)

attributeName adalah nama atribut yang nilainya ingin Anda dapatkan

Sebuah string yang berisi nilai attributeName


<div id="div1">Hi Champ!div>

_

// in a console
const div1 = document.getElementById('div1');
//=> Hi Champ!

const exampleAttr = div1.getAttribute('id');
//=> "div1"

const align = div1.getAttribute('align')
//=> null

Saat dipanggil pada elemen HTML di DOM yang ditandai sebagai dokumen HTML, getAttribute() huruf kecil argumennya sebelum melanjutkan

Semua browser web modern mengembalikan null ketika atribut yang ditentukan tidak ada pada elemen yang ditentukan

Untuk alasan keamanan, nonce CSP dari sumber non-skrip, seperti pemilih CSS, dan panggilan


<div id="div1">Hi Champ!div>

3 disembunyikan

Untuk menyisipkan HTML ke dalam dokumen daripada mengganti isi elemen, gunakan metode

document.body.innerHTML = "";

4

Sebuah string yang berisi serialisasi HTML dari turunan elemen. Menetapkan nilai

document.body.innerHTML = "";

3 menghapus semua turunan elemen dan menggantinya dengan node yang dibangun dengan mem-parsing HTML yang diberikan dalam string htmlString

document.body.innerHTML = "";

6

document.body.innerHTML = "";

7

Dilemparkan jika ada upaya untuk menyetel nilai

document.body.innerHTML = "";

3 menggunakan string yang tidak membentuk HTML dengan benar

document.body.innerHTML = "";

_9

document.body.innerHTML = "";

7

Dilemparkan jika ada upaya untuk memasukkan HTML ke dalam simpul yang induknya adalah

document.documentElement.innerHTML = `${document.documentElement.innerHTML.replace(/</g,"<")}`;

1

Properti

document.body.innerHTML = "";

3 dapat digunakan untuk memeriksa sumber HTML halaman saat ini, termasuk setiap perubahan yang telah dilakukan sejak halaman pertama kali dimuat

Membaca

document.body.innerHTML = "";

_3 menyebabkan agen pengguna membuat serialisasi fragmen HTML atau XML yang terdiri dari turunan elemen. String yang dihasilkan dikembalikan

let contents = myElement.innerHTML;

Ini memungkinkan Anda melihat markup HTML dari node konten elemen

Catatan. Fragmen HTML atau XML yang dikembalikan dihasilkan berdasarkan konten elemen saat ini, sehingga markup dan pemformatan fragmen yang dikembalikan kemungkinan tidak cocok dengan markup halaman asli

Menetapkan nilai

document.body.innerHTML = "";

_3 memungkinkan Anda dengan mudah mengganti konten elemen yang ada dengan konten baru

Catatan. Ini adalah jika string yang akan disisipkan mungkin berisi konten yang berpotensi berbahaya. Saat memasukkan data yang disediakan pengguna, Anda harus selalu mempertimbangkan untuk menggunakan

document.documentElement.innerHTML = `${document.documentElement.innerHTML.replace(/</g,"<")}`;

5 sebagai gantinya, untuk membersihkan konten sebelum dimasukkan

Misalnya, Anda dapat menghapus seluruh konten dokumen dengan menghapus konten dari atribut

document.documentElement.innerHTML = `${document.documentElement.innerHTML.replace(/</g,"<")}`;

6 dokumen

document.body.innerHTML = "";

_

Contoh ini mengambil markup HTML dokumen saat ini dan mengganti

document.documentElement.innerHTML = `${document.documentElement.innerHTML.replace(/</g,"<")}`;

7 karakter dengan entitas HTML

document.documentElement.innerHTML = `${document.documentElement.innerHTML.replace(/</g,"<")}`;

8, sehingga pada dasarnya mengubah HTML menjadi teks mentah. Ini kemudian dibungkus dengan elemen

document.documentElement.innerHTML = `${document.documentElement.innerHTML.replace(/</g,"<")}`;

_9. Kemudian nilai

document.body.innerHTML = "";

3 diubah menjadi string baru ini. Akibatnya, isi dokumen diganti dengan tampilan seluruh kode sumber halaman

document.documentElement.innerHTML = `${document.documentElement.innerHTML.replace(/</g,"<")}`;

Detail operasional

Apa yang sebenarnya terjadi jika Anda menetapkan nilai

document.body.innerHTML = "";

3?

Nilai yang ditentukan diuraikan sebagai HTML atau XML (berdasarkan jenis dokumen), menghasilkan objek
```
<ul id="list">
  <li><a href="#">Item 1a>li>
  <li><a href="#">Item 2a>li>
  <li><a href="#">Item 3a>li>
ul>
```
2 yang mewakili kumpulan node DOM baru untuk elemen baru

Jika elemen yang isinya diganti adalah elemen

<ul id="list">
  <li><a href="#">Item 1a>li>
  <li><a href="#">Item 2a>li>
  <li><a href="#">Item 3a>li>
ul>

3, maka atribut

<ul id="list">
  <li><a href="#">Item 1a>li>
  <li><a href="#">Item 2a>li>
  <li><a href="#">Item 3a>li>
ul>

3 elemen

<ul id="list">
  <li><a href="#">Item 1a>li>
  <li><a href="#">Item 2a>li>
  <li><a href="#">Item 3a>li>
ul>

5 diganti dengan atribut

<ul id="list">
  <li><a href="#">Item 1a>li>
  <li><a href="#">Item 2a>li>
  <li><a href="#">Item 3a>li>
ul>

2 baru yang dibuat pada langkah 1

Untuk semua elemen lainnya, konten elemen diganti dengan node di

<ul id="list">
  <li><a href="#">Item 1a>li>
  <li><a href="#">Item 2a>li>
  <li><a href="#">Item 3a>li>
ul>

2 baru

Menetapkan nilai

document.body.innerHTML = "";

3 memungkinkan Anda menambahkan konten baru ke elemen yang sudah ada

Misalnya, kita dapat menambahkan item daftar baru (

<ul id="list">
  <li><a href="#">Item 1a>li>
  <li><a href="#">Item 2a>li>
  <li><a href="#">Item 3a>li>
ul>

9) ke daftar yang ada (

const list = document.getElementById("list");

list.innerHTML += `Item ${list.children.length + 1}`;

0)

HTML

<ul id="list">
  <li><a href="#">Item 1a>li>
  <li><a href="#">Item 2a>li>
  <li><a href="#">Item 3a>li>
ul>

JavaScript

const list = document.getElementById("list");

list.innerHTML += `Item ${list.children.length + 1}`;

Harap perhatikan bahwa menggunakan

document.body.innerHTML = "";

_3 untuk menambahkan elemen HTML (mis. g.

const list = document.getElementById("list");

list.innerHTML += `Item ${list.children.length + 1}`;

_2) akan mengakibatkan penghapusan pemroses acara yang ditetapkan sebelumnya. Yaitu, setelah Anda menambahkan elemen HTML apa pun dengan cara itu, Anda tidak akan dapat mendengarkan event listener yang telah ditetapkan sebelumnya

Tidak jarang melihat

document.body.innerHTML = "";

_3 digunakan untuk menyisipkan teks ke halaman web. Hal ini berpotensi menjadi vektor serangan di situs, menciptakan potensi risiko keamanan

let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// …

name = "";
el.innerHTML = name; // harmless in this case

Meskipun ini mungkin terlihat seperti serangan skrip lintas situs, hasilnya tidak berbahaya. HTML menetapkan bahwa tag

const list = document.getElementById("list");

list.innerHTML += `Item ${list.children.length + 1}`;

_4 disisipkan dengan

document.body.innerHTML = "";

3

Namun, ada cara untuk mengeksekusi JavaScript tanpa menggunakan elemen

const list = document.getElementById("list");

list.innerHTML += `Item ${list.children.length + 1}`;

4, jadi masih ada risiko keamanan setiap kali Anda menggunakan

document.body.innerHTML = "";

3 untuk menyetel string yang tidak dapat Anda kendalikan. Sebagai contoh

const name = "";
el.innerHTML = name; // shows the alert

Oleh karena itu, Anda disarankan untuk menggunakan ________4______3 daripada ________4______3

document.documentElement.innerHTML = `${document.documentElement.innerHTML.replace(/</g,"<")}`;

5 untuk membersihkan teks sebelum dimasukkan ke dalam DOM

let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// …

name = "";
el.innerHTML = name; // harmless in this case

0 saat memasukkan teks biasa, karena ini memasukkannya sebagai teks mentah daripada menguraikannya sebagai HTML

Peringatan. Jika proyek Anda adalah salah satu yang akan menjalani segala bentuk tinjauan keamanan, menggunakan

document.body.innerHTML = "";

3 kemungkinan besar akan mengakibatkan kode Anda ditolak. Misalnya, di ekstensi browser dan mengirimkan ekstensi ke addons. mozilla. org, mungkin ditolak dalam proses peninjauan. Silakan lihat Memasukkan konten eksternal dengan aman ke halaman untuk metode alternatif

Contoh ini menggunakan

document.body.innerHTML = "";

_3 untuk membuat mekanisme untuk mencatat pesan ke dalam kotak di halaman web

function log(msg) {
  const logElem = document.querySelector(".log");

  const time = new Date();
  const timeStr = time.toLocaleTimeString();
  logElem.innerHTML += `${timeStr}: ${msg}
`;
}

log("Logging mouse events inside this container…");

Fungsi

let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// …

name = "";
el.innerHTML = name; // harmless in this case

_4 membuat keluaran log dengan mendapatkan waktu saat ini dari objek

let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// …

name = "";
el.innerHTML = name; // harmless in this case

5 menggunakan

let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// …

name = "";
el.innerHTML = name; // harmless in this case

6, dan membuat string dengan stempel waktu dan teks pesan. Kemudian pesan ditambahkan ke kotak dengan kelas

let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// …

name = "";
el.innerHTML = name; // harmless in this case

7

Kami menambahkan metode kedua yang mencatat informasi tentang peristiwa berbasis

let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// …

name = "";
el.innerHTML = name; // harmless in this case

8 (seperti

let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// …

name = "";
el.innerHTML = name; // harmless in this case

9,

const name = "";
el.innerHTML = name; // shows the alert

0, dan

const name = "";
el.innerHTML = name; // shows the alert

1)

function logEvent(event) {
  const msg = `Event ${event.type} at ${event.clientX}, ${event.clientY}`;
  log(msg);
}

Kemudian kami menggunakan ini sebagai event handler untuk sejumlah mouse event pada kotak yang berisi log kami

const boxElem = document.querySelector(".box");

boxElem.addEventListener("mousedown", logEvent);
boxElem.addEventListener("mouseup", logEvent);
boxElem.addEventListener("click", logEvent);
boxElem.addEventListener("mouseenter", logEvent);
boxElem.addEventListener("mouseleave", logEvent);

HTML cukup sederhana untuk contoh kita

document.body.innerHTML = "";

_0

const name = "";
el.innerHTML = name; // shows the alert

_2 dengan kelas

const name = "";
el.innerHTML = name; // shows the alert

3 hanyalah wadah untuk tujuan tata letak, menampilkan konten dengan kotak di sekelilingnya.

const name = "";
el.innerHTML = name; // shows the alert

_2 yang kelasnya adalah

let name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// …

name = "";
el.innerHTML = name; // harmless in this case

7 adalah wadah untuk teks log itu sendiri

CSS berikut mengatur konten contoh kita

document.body.innerHTML = "";

_1

Konten yang dihasilkan terlihat seperti ini. Anda dapat melihat keluaran ke dalam log dengan menggerakkan mouse masuk dan keluar dari kotak, mengkliknya, dan seterusnya

Bagaimana cara mendapatkan konten HTML dalam JavaScript?

Anda dapat menggunakan innerHTML untuk mendapatkan dan mengatur konten HTML dalam sebuah elemen . var elemen = dokumen. querySelector('#beberapa-elem'); . innerHTML; .

Bagaimana cara menambahkan HTML dalam JavaScript?

Menggunakan atribut innerHTML. Untuk menambahkan menggunakan atribut innerHTML, pertama-tama pilih elemen (div) tempat Anda ingin menambahkan kode. Kemudian, tambahkan kode yang diapit sebagai string menggunakan operator += pada innerHTML .

Bisakah Anda menghasilkan HTML dengan JavaScript?

Javascript memiliki beberapa metode bermanfaat yang memungkinkan kita membuat elemen HTML . Ini penting dalam kasus di mana kami tidak ingin membuat kode keras pada markup tetapi membuatnya secara dinamis ketika peristiwa tertentu terjadi di browser.

kode javascript

Cara mendapatkan html di javascript

Detail operasional

HTML

JavaScript

Bagaimana cara mendapatkan konten HTML dalam JavaScript?

Bagaimana cara menambahkan HTML dalam JavaScript?

Bisakah Anda menghasilkan HTML dengan JavaScript?

Bài Viết Liên Quan

Có thể bạn quan tâm

Xem Nhiều

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội