Có nhiều thuộc tính khác nhau trong JavaScript giúp làm việc với HTML của trang hiện tại. Thuộc tính innerHTML trong JavaScript được sử dụng để thêm Html vào phần tử. Nó cũng trả về nội dung có trong một phần tử
Tập lệnh là các chương trình hoặc mã JavaScript giúp trang web tương tác và động. Chúng tôi có thể thêm tập lệnh trong thẻ tập lệnh trên cùng một trang hoặc một trang JavaScript khác được liên kết với tệp HTML
HTML được chèn vào thuộc tính innerHTML cho một phần tử. Tuy nhiên, không thể chèn tập lệnh vào thuộc tính InternalHTML. Nếu được chèn vào InternalHTML, nó sẽ không được hiển thị trên trang cũng như không được thực thi. Tập lệnh trong InternalHTML không làm gì trên trang web
Vì vậy, chúng ta hãy xem tập lệnh được chèn bằng InternalHTML và cách thêm tập lệnh để thực thi
Chèn tập lệnh bằng InternalHTML
InternalHTML được sử dụng để thay thế nội dung của phần tử Html bằng nội dung Html được thêm vào nó. Nó được sử dụng cho nội dung Html và không thể thực thi tập lệnh với thuộc tính này. Tập lệnh được thêm vào bên trongHTML cũng không hiển thị trên màn hình
Chúng tôi không thể sử dụng InternalHTML cho các thành phần của tập lệnh. Nhưng chúng ta có thể thêm tập lệnh vào phần tử bằng cách tạo tập lệnh có tên phần tử bằng phương thức createElement. Chúng tôi phải thêm một tập lệnh bên trong nó bằng cách sử dụng InternalHTML và sau đó nối nó trở lại phần tử phải thêm tập lệnh. Theo cách này, trước tiên chúng ta phải thêm tập lệnh vào phần tử tập lệnh rồi đến phần tử HTML bằng cách nối nó vào một phần tử
Chúng tôi đang làm theo cú pháp dưới đây để chèn tập lệnh với InternalHTML
cú pháp
//A wrong way to add a script using innerHTML var element = document.getElementById[""]; element.innerhtml= ""; //A right way to add a script using innerHTML var script= document.createElement["script"]; script.innerhtml=""; element.appendChild[ script ];
Chúng tôi đang làm theo cú pháp trên để kiểm tra xem các tập lệnh có thể được chèn bằng InternalHTML hay không
Thí dụ
Trong ví dụ bên dưới, chúng ta phải hiển thị bình phương của số do người dùng nhập vào trường nhập liệu. Chúng tôi đã thêm tập lệnh vào thuộc tính InternalHTML của một phần tử. Nhưng nó không phải là hành vi của thuộc tính này để thực thi tập lệnh như thế này. Tập lệnh này đã trở nên vô dụng vì nó không thực thi cũng như không hiển thị trên màn hình. Vì vậy, chúng tôi đã tạo một phần tử tập lệnh bằng thuộc tính createElement và thêm một tập lệnh bên trong nó bằng cách sử dụng InternalHTML. Cuối cùng, chúng tôi đã thêm phần tử tập lệnh này vào một phần tử trong phần tử HTML
Using the innerHTML property to insert a script
Enter a number:
Submit
Trong ví dụ này, người dùng có thể thấy rằng để thực thi một tập lệnh bằng thuộc tính innerHTML, chúng ta phải thêm nó thông qua phần tử tập lệnh
Chèn tập lệnh bằng phương thức eval[] với InternalHTML
Phương thức eval[] là phương thức trong JavaScript lấy tập lệnh dưới dạng một chuỗi trong tham số của nó. Nó sẽ thực thi chuỗi được cung cấp trong tham số dưới dạng câu lệnh JavaScript và trả về kết quả của tập lệnh. Chúng ta phải chèn tập lệnh trong dấu ngoặc kép hoặc đơn vì phương thức này cung cấp tập lệnh dưới dạng chuỗi
Tất cả người dùng có thể làm theo cú pháp để sử dụng phương thức eval[] với InternalHTML để chèn tập lệnh
cú pháp
var element = document.getElementById[""]; element.innerhtml= eval[""];
Thực hiện theo cú pháp trên để sử dụng phương thức eval[] trong JavaScript
Thí dụ
Trong ví dụ này, chúng tôi đã sử dụng phương thức eval[] để thực thi tập lệnh bên trong thuộc tính InternalHTML. Từ người dùng, chúng tôi sẽ lấy hai đầu vào, hiển thị phép trừ trên màn hình sau khi nhấp vào nút. Tập lệnh trừ một số đã được thêm vào bên trong phương thức eval trong thuộc tính InternalHTML
Using the eval[] method to insert a script through innerHTML
First number:
-
Second number:
Substract
Trong ví dụ trên, người dùng có thể thấy rằng chúng ta đã sử dụng phương thức eval[] để thực thi một chuỗi bên trong thuộc tính InternalHTML của 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 Element.innerHTML
Bạn có thể sử dụng thuộc tính Element.innerHTML
để lấy và đặt nội dung HTML bên trong một phần tử dưới dạng chuỗi
Hello world!
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 Element.innerHTML
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
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
';
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ư Element.innerHTML
, nhưng bao gồm chính phần tử đó khi nhận và cập nhật nội dung HTML
Hello world!
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
';
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
';
5
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
';
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ỗiTrong 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
';
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
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
p {
color: rebeccapurple;
}
This is not rendered.
Hello world!
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 = 'See you later!
';
Đâ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
';
5Tài sản
Hello world!
2
Hello world!
Thuộc tính
Hello world!
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
Hello world!
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ư
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
p {
color: rebeccapurple;
}
This is not rendered.
Hello world!
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 = 'See you later!
';
Đây là bản demo của tài sản
Hello world!
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
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 Element.innerHTML
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