Làm cách nào để đặt HTML bằng 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 Show
Nào cùng đào vào bên trong Tài sản Element.innerHTMLBạn có thể sử dụng thuộc tính
Đây là bản demo của tài sản 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 '; 1Bạn có thể sử dụng thuộc tính 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ư Element.innerHTML , nhưng bao gồm chính phần tử đó khi nhận và cập nhật nội dung HTML
Đây là bản demo của tài sản 1Tà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 '; 5Bạn có thể sử dụng thuộc tính 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ỗiTrong ví dụ bên dưới, bạn có thể nhận thấy rằng thuộc tính 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ử 8 và phần tử giao diện người dùng 9Bất kỳ phần tử HTML nào được bao gồm trong một chuỗi khi đặt nội dung với thuộc tính 5 sẽ tự động được mã hóa và hiển thị nguyên trạng
Đây là bản demo của tài sản 5Tài sản Hello world! Thuộc tính 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 5, thuộc tính 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ảnGiống như 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
Đây là bản demo của tài sản 2Bạ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 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 |