Bisakah kita menulis html di dalam javascript?

Question

Hari ini, kita akan melihat empat teknik berbeda yang dapat Anda gunakan untuk mendapatkan dan menyetel teks dan HTML dalam elemen DOM

Table of Contents Show

Properti Element.innerHTML_
Properti let greeting = document.querySelector('.greeting'); // Get HTML content // returns "Hello world!" let html = greeting.innerHTML; // Set HTML content // This replaces what was in there already greeting.innerHTML = 'We can dynamically change the HTML. We can even include HTML elements like <a href="#">this link</a>.'; // Add HTML to the end of an element's existing content greeting.innerHTML += ' Add this after what is already there.'; // Add HTML to the beginning of an element's existing content greeting.innerHTML = 'We can add this to the beginning. ' + elem.innerHTML; // You can inject entire elements into other ones, too greeting.innerHTML += 'A new paragraph'; _1
Properti let greeting = document.querySelector('.greeting'); // Get HTML content // returns "Hello world!" let html = greeting.innerHTML; // Set HTML content // This replaces what was in there already greeting.innerHTML = 'We can dynamically change the HTML. We can even include HTML elements like <a href="#">this link</a>.'; // Add HTML to the end of an element's existing content greeting.innerHTML += ' Add this after what is already there.'; // Add HTML to the beginning of an element's existing content greeting.innerHTML = 'We can add this to the beginning. ' + elem.innerHTML; // You can inject entire elements into other ones, too greeting.innerHTML += 'A new paragraph'; 5
Properti <div class="greeting"> Hello world! </div>2
Yang mana yang harus Anda gunakan?
Bisakah Anda menulis HTML dalam JavaScript?
Bagaimana cara menulis kode HTML di dalam JavaScript?

Mari kita menggali lebih dalam

Properti Element.innerHTML_

Anda dapat menggunakan properti Element.innerHTML_ untuk mendapatkan dan mengatur konten HTML di dalam elemen sebagai string

<div class="greeting">
	<p>Hello world!</p>
</div>

let greeting = document.querySelector('.greeting');

// Get HTML content
// returns "<p>Hello world!</p>"
let html = greeting.innerHTML;

// Set HTML content
// This replaces what was in there already
greeting.innerHTML = 'We can dynamically change the HTML. We can even include HTML elements like <a href="#">this link</a>.';

// Add HTML to the end of an element's existing content
greeting.innerHTML += ' Add this after what is already there.';

// Add HTML to the beginning of an element's existing content
greeting.innerHTML = 'We can add this to the beginning. ' + elem.innerHTML;

// You can inject entire elements into other ones, too
greeting.innerHTML += '<p>A new paragraph</p>';

_

Ini demo properti Element.innerHTML

Properti let greeting = document.querySelector('.greeting'); // Get HTML content // returns "Hello world!" let html = greeting.innerHTML; // Set HTML content // This replaces what was in there already greeting.innerHTML = 'We can dynamically change the HTML. We can even include HTML elements like <a href="#">this link</a>.'; // Add HTML to the end of an element's existing content greeting.innerHTML += ' Add this after what is already there.'; // Add HTML to the beginning of an element's existing content greeting.innerHTML = 'We can add this to the beginning. ' + elem.innerHTML; // You can inject entire elements into other ones, too greeting.innerHTML += 'A new paragraph'; _1

Anda dapat menggunakan properti

let greeting = document.querySelector('.greeting');

// Get HTML content
// returns "<p>Hello world!</p>"
let html = greeting.innerHTML;

// Set HTML content
// This replaces what was in there already
greeting.innerHTML = 'We can dynamically change the HTML. We can even include HTML elements like <a href="#">this link</a>.';

// Add HTML to the end of an element's existing content
greeting.innerHTML += ' Add this after what is already there.';

// Add HTML to the beginning of an element's existing content
greeting.innerHTML = 'We can add this to the beginning. ' + elem.innerHTML;

// You can inject entire elements into other ones, too
greeting.innerHTML += '<p>A new paragraph</p>';

_1 untuk mendapatkan dan mengatur konten HTML termasuk elemen. Ini berfungsi sama seperti Element.innerHTML, tetapi menyertakan elemen itu sendiri saat mendapatkan dan memperbarui konten HTML

<div class="greeting">
	<p>Hello world!</p>
</div>

let greeting = document.querySelector('.greeting');

// Get HTML content
// returns "<div class="greeting"><p>Hello world!</p></div>"
let html = greeting.outerHTML;

// Set HTML content
// This completely replaces the <div class="greeting"></div> element and all of its content
greeting.outerHTML = '<p class="outro">Goodbye, friend! <a href="exit.html">Click here to leave.</a>';

// Add HTML after the element (and outside of it)
greeting.outerHTML += ' Add this after what is already there.';

// Add HTML before the element (and outside of it)
greeting.outerHTML = 'We can add this to the beginning. ' + greeting.innerHTML;

Ini demo properti

let greeting = document.querySelector('.greeting');

// Get HTML content
// returns "<p>Hello world!</p>"
let html = greeting.innerHTML;

// Set HTML content
// This replaces what was in there already
greeting.innerHTML = 'We can dynamically change the HTML. We can even include HTML elements like <a href="#">this link</a>.';

// Add HTML to the end of an element's existing content
greeting.innerHTML += ' Add this after what is already there.';

// Add HTML to the beginning of an element's existing content
greeting.innerHTML = 'We can add this to the beginning. ' + elem.innerHTML;

// You can inject entire elements into other ones, too
greeting.innerHTML += '<p>A new paragraph</p>';

_1

Properti let greeting = document.querySelector('.greeting'); // Get HTML content // returns "Hello world!" let html = greeting.innerHTML; // Set HTML content // This replaces what was in there already greeting.innerHTML = 'We can dynamically change the HTML. We can even include HTML elements like <a href="#">this link</a>.'; // Add HTML to the end of an element's existing content greeting.innerHTML += ' Add this after what is already there.'; // Add HTML to the beginning of an element's existing content greeting.innerHTML = 'We can add this to the beginning. ' + elem.innerHTML; // You can inject entire elements into other ones, too greeting.innerHTML += 'A new paragraph'; 5

Anda dapat menggunakan properti

let greeting = document.querySelector('.greeting');

// Get HTML content
// returns "<p>Hello world!</p>"
let html = greeting.innerHTML;

// Set HTML content
// This replaces what was in there already
greeting.innerHTML = 'We can dynamically change the HTML. We can even include HTML elements like <a href="#">this link</a>.';

// Add HTML to the end of an element's existing content
greeting.innerHTML += ' Add this after what is already there.';

// Add HTML to the beginning of an element's existing content
greeting.innerHTML = 'We can add this to the beginning. ' + elem.innerHTML;

// You can inject entire elements into other ones, too
greeting.innerHTML += '<p>A new paragraph</p>';

5 untuk mendapatkan dan menyetel teks elemen (dan menghilangkan markup) sebagai string

Dalam contoh di bawah, Anda mungkin memperhatikan bahwa properti

let greeting = document.querySelector('.greeting');

// Get HTML content
// returns "<p>Hello world!</p>"
let html = greeting.innerHTML;

// Set HTML content
// This replaces what was in there already
greeting.innerHTML = 'We can dynamically change the HTML. We can even include HTML elements like <a href="#">this link</a>.';

// Add HTML to the end of an element's existing content
greeting.innerHTML += ' Add this after what is already there.';

// Add HTML to the beginning of an element's existing content
greeting.innerHTML = 'We can add this to the beginning. ' + elem.innerHTML;

// You can inject entire elements into other ones, too
greeting.innerHTML += '<p>A new paragraph</p>';

5 mendapatkan semua konten teks, termasuk properti CSS di dalam elemen

let greeting = document.querySelector('.greeting');

// Get HTML content
// returns "<p>Hello world!</p>"
let html = greeting.innerHTML;

// Set HTML content
// This replaces what was in there already
greeting.innerHTML = 'We can dynamically change the HTML. We can even include HTML elements like <a href="#">this link</a>.';

// Add HTML to the end of an element's existing content
greeting.innerHTML += ' Add this after what is already there.';

// Add HTML to the beginning of an element's existing content
greeting.innerHTML = 'We can add this to the beginning. ' + elem.innerHTML;

// You can inject entire elements into other ones, too
greeting.innerHTML += '<p>A new paragraph</p>';

8 dan

let greeting = document.querySelector('.greeting');

// Get HTML content
// returns "<p>Hello world!</p>"
let html = greeting.innerHTML;

// Set HTML content
// This replaces what was in there already
greeting.innerHTML = 'We can dynamically change the HTML. We can even include HTML elements like <a href="#">this link</a>.';

// Add HTML to the end of an element's existing content
greeting.innerHTML += ' Add this after what is already there.';

// Add HTML to the beginning of an element's existing content
greeting.innerHTML = 'We can add this to the beginning. ' + elem.innerHTML;

// You can inject entire elements into other ones, too
greeting.innerHTML += '<p>A new paragraph</p>';

9 elemen UI

Setiap elemen HTML yang disertakan dalam string saat menyetel konten dengan properti

let greeting = document.querySelector('.greeting');

// Get HTML content
// returns "<p>Hello world!</p>"
let html = greeting.innerHTML;

// Set HTML content
// This replaces what was in there already
greeting.innerHTML = 'We can dynamically change the HTML. We can even include HTML elements like <a href="#">this link</a>.';

// Add HTML to the end of an element's existing content
greeting.innerHTML += ' Add this after what is already there.';

// Add HTML to the beginning of an element's existing content
greeting.innerHTML = 'We can add this to the beginning. ' + elem.innerHTML;

// You can inject entire elements into other ones, too
greeting.innerHTML += '<p>A new paragraph</p>';

5 secara otomatis dikodekan dan dirender apa adanya

<div class="greeting">
	<style type="text/css">
		p {
			color: rebeccapurple;
		}
	</style>
	<p hidden>This is not rendered.</p>
	<p>Hello world!</p>
</div>

let greeting = document.querySelector('.greeting');

// Get text content
// returns "p {color: rebeccapurple;} This is not rendered. Hello world!"
let text = greeting.textContent;

// Set text content
// This completely replaces whats there, including any HTML elements
greeting.textContent = 'We can dynamically change the content.';

// Add text to the end of an element's existing content
greeting.textContent += ' Add this after what is already there.';

// Add text to the beginning of an element's existing content
greeting.textContent = 'We can add this to the beginning. ' + greeting.textContent;

// HTML elements are automatically encoded and rendered as-is
greeting.textContent = '<p>See you later!</p>';

Ini demo properti

let greeting = document.querySelector('.greeting');

// Get HTML content
// returns "<p>Hello world!</p>"
let html = greeting.innerHTML;

// Set HTML content
// This replaces what was in there already
greeting.innerHTML = 'We can dynamically change the HTML. We can even include HTML elements like <a href="#">this link</a>.';

// Add HTML to the end of an element's existing content
greeting.innerHTML += ' Add this after what is already there.';

// Add HTML to the beginning of an element's existing content
greeting.innerHTML = 'We can add this to the beginning. ' + elem.innerHTML;

// You can inject entire elements into other ones, too
greeting.innerHTML += '<p>A new paragraph</p>';

_5

Properti <div class="greeting"> Hello world! </div>2

Properti

<div class="greeting">
	<p>Hello world!</p>
</div>

2 mendapatkan dan menyetel teks yang dirender dari suatu elemen (dan menghilangkan markup)

Tidak seperti properti

let greeting = document.querySelector('.greeting');

// Get HTML content
// returns "<p>Hello world!</p>"
let html = greeting.innerHTML;

// Set HTML content
// This replaces what was in there already
greeting.innerHTML = 'We can dynamically change the HTML. We can even include HTML elements like <a href="#">this link</a>.';

// Add HTML to the end of an element's existing content
greeting.innerHTML += ' Add this after what is already there.';

// Add HTML to the beginning of an element's existing content
greeting.innerHTML = 'We can add this to the beginning. ' + elem.innerHTML;

// You can inject entire elements into other ones, too
greeting.innerHTML += '<p>A new paragraph</p>';

_5, properti

<div class="greeting">
	<p>Hello world!</p>
</div>

2 hanya mengembalikan teks yang dirender, serupa dengan yang dapat dipilih pengguna dengan kursor atau keyboard saat menyorot teks

Seperti

let greeting = document.querySelector('.greeting');

// Get HTML content
// returns "<p>Hello world!</p>"
let html = greeting.innerHTML;

// Set HTML content
// This replaces what was in there already
greeting.innerHTML = 'We can dynamically change the HTML. We can even include HTML elements like <a href="#">this link</a>.';

// Add HTML to the end of an element's existing content
greeting.innerHTML += ' Add this after what is already there.';

// Add HTML to the beginning of an element's existing content
greeting.innerHTML = 'We can add this to the beginning. ' + elem.innerHTML;

// You can inject entire elements into other ones, too
greeting.innerHTML += '<p>A new paragraph</p>';

_5, setiap elemen HTML yang disertakan dalam string saat mengatur konten secara otomatis dikodekan dan dirender apa adanya

<div class="greeting">
	<style type="text/css">
		p {
			color: rebeccapurple;
		}
	</style>
	<p hidden>This is not rendered.</p>
	<p>Hello world!</p>
</div>

let elem = document.querySelector('.greeting');

// Get text content
// returns "Hello world!"
let text = elem.innerText;

// Set text content
// This completely replaces whats there, including any HTML elements
elem.innerText = 'We can dynamically change the content.';

// Add text to the end of an element's existing content
elem.innerText += ' Add this after what is already there.';

// Add text to the beginning of an element's existing content
elem.innerText = 'We can add this to the beginning. ' + elem.innerText;

// HTML elements are automatically encoded and rendered as-is
elem.innerText = '<p>See you later!</p>';

Ini demo properti

<div class="greeting">
	<p>Hello world!</p>
</div>

_2

Yang mana yang harus Anda gunakan?

Secara umum, jika Anda hanya mengubah teks, menggunakan properti

let greeting = document.querySelector('.greeting');

// Get HTML content
// returns "<p>Hello world!</p>"
let html = greeting.innerHTML;

// Set HTML content
// This replaces what was in there already
greeting.innerHTML = 'We can dynamically change the HTML. We can even include HTML elements like <a href="#">this link</a>.';

// Add HTML to the end of an element's existing content
greeting.innerHTML += ' Add this after what is already there.';

// Add HTML to the beginning of an element's existing content
greeting.innerHTML = 'We can add this to the beginning. ' + elem.innerHTML;

// You can inject entire elements into other ones, too
greeting.innerHTML += '<p>A new paragraph</p>';

5 adalah taruhan terbaik dan teraman Anda

Untuk memodifikasi HTML, properti Element.innerHTML sangat berguna, tetapi memiliki beberapa masalah keamanan yang akan kita lihat di artikel lain

Bisakah Anda menulis HTML dalam JavaScript?

JavaScript dapat "menampilkan" data dengan berbagai cara. Menulis ke elemen HTML, menggunakan innerHTML . Menulis ke output HTML menggunakan dokumen. menulis().