Làm cách nào để thêm thẻ HTML vào JavaScript?

Hôm nay, chúng ta sẽ xem xét bốn kỹ thuật khác nhau mà bạn có thể sử dụng để lấy và đặt văn bản cũng như HTML trong các phần tử DOM

Nào cùng đào vào bên trong

Tài sản 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 this link.'; // 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

Bạn có thể sử dụng thuộc tính

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 this link.';

// 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 để lấy và đặt nội dung HTML bên trong một phần tử dưới dạng chuỗi

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

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 this link.';

// 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
';

Đây là bản demo của tài sản

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 this link.';

// 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

Tài sản 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 this link.'; // 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

Bạn có thể sử dụng thuộc tính

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 this link.';

// 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 để lấy và đặt nội dung HTML bao gồm một phần tử. Điều này hoạt động giống như

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 this link.';

// 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, nhưng bao gồm chính phần tử đó khi nhận và cập nhật nội dung HTML

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

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

// Get HTML content
// returns "
Hello world!
"
let html = greeting.outerHTML;

// Set HTML content
// This completely replaces the 
 element and all of its content
greeting.outerHTML = '
Goodbye, friend! Click here to leave.';

// 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;

Đây là bản demo của tài sản

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 this link.';

// 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

Tài sản 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 this link.'; // 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

Bạn có thể sử dụng thuộc tính

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 this link.';

// 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 để lấy và đặt văn bản của một phần tử (và bỏ qua phần đánh dấu) dưới dạng một chuỗi

Trong ví dụ bên dưới, bạn có thể nhận thấy rằng thuộc tính

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 this link.';

// 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 nhận tất cả nội dung văn bản, bao gồm các thuộc tính CSS bên trong phần tử

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 this link.';

// 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
';

8 và phần tử giao diện người dùng

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 this link.';

// 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
';

9

Bất kỳ phần tử HTML nào được bao gồm trong chuỗi khi đặt nội dung bằng thuộc tính

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 this link.';

// 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 sẽ tự động được mã hóa và hiển thị nguyên trạng

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 this link.';

// 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
';

3

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 this link.';

// 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
';

4

Đây là bản demo của tài sản

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 this link.';

// 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

Tài sản

Hello world!

2

Thuộc tính

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

2 lấy và đặt văn bản được hiển thị của một phần tử (và bỏ qua phần đánh dấu)

Không giống như thuộc tính

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 this link.';

// 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, thuộc tính

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

2 chỉ trả về văn bản được hiển thị, tương tự như những gì người dùng có thể chọn bằng con trỏ hoặc bàn phím khi đánh dấu văn bản

Giống như

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 this link.';

// 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, bất kỳ phần tử HTML nào được bao gồm trong chuỗi khi đặt nội dung sẽ tự động được mã hóa và hiển thị nguyên trạng

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 this link.';

// 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
';

3

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 this link.';

// 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
';

2

Đây là bản demo của tài sản

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

2

Bạn nên sử dụng cái nào?

Nói chung, nếu bạn chỉ sửa đổi văn bản, sử dụng thuộc tính

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 this link.';

// 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 là lựa chọn tốt nhất, an toàn nhất của bạn

Để sửa đổi HTML, thuộc tính

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 this link.';

// 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 rất hữu ích nhưng có một số lo ngại về bảo mật mà chúng tôi sẽ xem xét trong một bài viết khác