Các ví dụ dưới đây đề cập đến đoạn trích HTML sau:
Warning: This element contains code
and strong language.
Nút sẽ được tham chiếu bởi JavaScript sau:
var x = document.getElementById['test'];
var x = document.getElementById['test'];
2
var x = document.getElementById['test'];
Đặt hoặc nhận cú pháp HTML mô tả con cháu của phần tử
x.innerHTML
// => "
// => Warning: This element contains code
and strong language.
// => "
Đây là một phần của đặc tả phân tích và tuần tự hóa DOM của W3C. Lưu ý rằng đó là một thuộc tính của các đối tượng
var x = document.getElementById['test'];
3.var x = document.getElementById['test'];
4
var x = document.getElementById['test'];
Đặt hoặc nhận văn bản giữa các thẻ bắt đầu và kết thúc của đối tượng
x.innerText
// => "Warning: This element contains code and strong language."
5 được Microsoft giới thiệu và trong một thời gian không được Firefox hỗ trợ. Vào tháng 8 năm 2016,var x = document.getElementById['test'];
5 đã được Whatwg áp dụng và đã được thêm vào Firefox trong V45.var x = document.getElementById['test'];
5 cung cấp cho bạn một nhận thức về phong cách, đại diện cho văn bản cố gắng phù hợp với những gì được trình duyệt hiển thị, điều này có nghĩa là:var x = document.getElementById['test'];
5 áp dụng quy tắcvar x = document.getElementById['test'];
9 vàvar x = document.getElementById['test'];
0x.innerHTML // => " // => Warning: This element contains
code
and strong language. // => "
5 Trims trắng không gian giữa các dòng và thêm các đường đứt đường giữa các mụcvar x = document.getElementById['test'];
5 sẽ không trả lại văn bản cho các mục vô hìnhvar x = document.getElementById['test'];
5 sẽ trở lạivar x = document.getElementById['test'];
4 cho các yếu tố không bao giờ được hiển thị nhưx.innerHTML // => " // => Warning: This element contains
code
and strong language. // => "
5 và `x.innerHTML // => " // => Warning: This element contains
code
and strong language. // => "- Thuộc tính của các yếu tố
6x.innerHTML // => " // => Warning: This element contains
code
and strong language. // => "
x.innerHTML
// => "
// => Warning: This element contains code
and strong language.
// => "
7
x.innerHTML
// => "
// => Warning: This element contains code
and strong language.
// => "
Nhận hoặc đặt nội dung văn bản của một nút và hậu duệ của nó.
x.textContent
// => "
// => Warning: This element contains code and strong language.
// => "
Mặc dù đây là một tiêu chuẩn W3C, nhưng nó không được IE "
// => Warning: This element contains code
and strong language.
// => "
6
x.innerHTML
// => "
// => Warning: This element contains code
and strong language.
// => "
9
x.innerHTML
// => "
// => Warning: This element contains code
and strong language.
// => "
Nhận hoặc đặt nội dung văn bản của một nút và hậu duệ của nó.
x.value // => null
Mặc dù đây là một tiêu chuẩn W3C, nhưng nó không được IE "Warning: This element contains code and strong language." 0 trả về một đối tượng HTMLDiveL, không có thuộc tính
x.innerText
// => "Warning: This element contains code and strong language."
1 được xác định.Các thẻ đầu vào [x.innerText
// => "Warning: This element contains code and strong language."
2], ví dụ, xác định thuộc tính x.innerText
// => "Warning: This element contains code and strong language."
1, đề cập đến "giá trị hiện tại trong điều khiển".
x.innerText
// => "Warning: This element contains code and strong language."
x.innerText
// => "Warning: This element contains code and strong language."
document.getElementById['example-input'].value //=> "default"
// User changes input to "something"
document.getElementById['example-input'].value //=> "something"
var properties = ['innerHTML', 'innerText', 'textContent', 'value'];
// Writes to textarea#output and console
function log[obj] {
console.log[obj];
var currValue = document.getElementById['output'].value;
document.getElementById['output'].value = [currValue ? currValue + '\n' : ''] + obj;
}
// Logs property as [propName]value[/propertyName]
function logProperty[obj, property] {
var value = obj[property];
log['[' + property + ']' + value + '[/' + property + ']'];
}
// Main
log['=============== ' + properties.join[' '] + ' ==============='];
for [var i = 0; i < properties.length; i++] {
logProperty[document.getElementById['test'], properties[i]];
}
Warning: This element contains code
and strong language.
Cải thiện bài viết
Lưu bài viết
Cải thiện bài viết
Lưu bài viết
Đọc and innerHTML are both properties of JavaScript. However, there are differences in which the text is handled. Let us check the syntax of the two and then take an example to look at the differences.
Syntax:
Bàn luận
var x = document.getElementById['test'];
- Bên trong và bên trong đều là các thuộc tính của JavaScript. Tuy nhiên, có sự khác biệt trong đó văn bản được xử lý. Hãy để chúng tôi kiểm tra cú pháp của cả hai và sau đó lấy một ví dụ để xem xét sự khác biệt. & NBSP;
var x = document.getElementById['test'];
0- Chúng ta hãy giả sử rằng chúng ta có một biến JavaScript gọi là x.
var x = document.getElementById['test'];
1Example:
Nội tâm
x.innerText
// => "Warning: This element contains code and strong language."
5x.innerText
// => "Warning: This element contains code and strong language."
6x.innerText
// => "Warning: This element contains code and strong language."
7x.innerText
// => "Warning: This element contains code and strong language."
8x.innerText
// => "Warning: This element contains code and strong language."
6x.textContent
// => "
// => Warning: This element contains code and strong language.
// => "
0x.innerText
// => "Warning: This element contains code and strong language."
8x.textContent
// => "
// => Warning: This element contains code and strong language.
// => "
2x.innerText
// => "Warning: This element contains code and strong language."
6x.textContent
// => "
// => Warning: This element contains code and strong language.
// => "
4x.innerText
// => "Warning: This element contains code and strong language."
8x.textContent
// => "
// => Warning: This element contains code and strong language.
// => "
6x.textContent
// => "
// => Warning: This element contains code and strong language.
// => "
7x.textContent
// => "
// => Warning: This element contains code and strong language.
// => "
8x.textContent
// => "
// => Warning: This element contains code and strong language.
// => "
9x.textContent
// => "
// => Warning: This element contains code and strong language.
// => "
2x.value // => null
1x.textContent
// => "
// => Warning: This element contains code and strong language.
// => "
4x.innerText
// => "Warning: This element contains code and strong language."
8x.value // => null
1x.textContent
// => "
// => Warning: This element contains code and strong language.
// => "
0x.innerText
// => "Warning: This element contains code and strong language."
8Nội tâm
HTML
x.innerText
// => "Warning: This element contains code and strong language."
6x.value // => null
8 x.value // => null
9x.textContent
// => "
// => Warning: This element contains code and strong language.
// => "
6var properties = ['innerHTML', 'innerText', 'textContent', 'value'];
// Writes to textarea#output and console
function log[obj] {
console.log[obj];
var currValue = document.getElementById['output'].value;
document.getElementById['output'].value = [currValue ? currValue + '\n' : ''] + obj;
}
// Logs property as [propName]value[/propertyName]
function logProperty[obj, property] {
var value = obj[property];
log['[' + property + ']' + value + '[/' + property + ']'];
}
// Main
log['=============== ' + properties.join[' '] + ' ==============='];
for [var i = 0; i < properties.length; i++] {
logProperty[document.getElementById['test'], properties[i]];
}
1
document.getElementById['example-input'].value //=> "default"
// User changes input to "something"
document.getElementById['example-input'].value //=> "something"
0x.innerText
// => "Warning: This element contains code and strong language."
6
document.getElementById['example-input'].value //=> "default"
// User changes input to "something"
document.getElementById['example-input'].value //=> "something"
2
document.getElementById['example-input'].value //=> "default"
// User changes input to "something"
document.getElementById['example-input'].value //=> "something"
3
document.getElementById['example-input'].value //=> "default"
// User changes input to "something"
document.getElementById['example-input'].value //=> "something"
2x.innerText
// => "Warning: This element contains code and strong language."
8x.textContent
// => "
// => Warning: This element contains code and strong language.
// => "
6x.innerText
// => "Warning: This element contains code and strong language."
6
Warning: This element contains code
and strong language.
0
Warning: This element contains code
and strong language.
1
Warning: This element contains code
and strong language.
0
Warning: This element contains code
and strong language.
3x.textContent
// => "
// => Warning: This element contains code and strong language.
// => "
2x.value // => null
1
document.getElementById['example-input'].value //=> "default"
// User changes input to "something"
document.getElementById['example-input'].value //=> "something"
8x.innerText
// => "Warning: This element contains code and strong language."
8x.textContent
// => "
// => Warning: This element contains code and strong language.
// => "
2x.innerText
// => "Warning: This element contains code and strong language."
6var x = document.getElementById['test'];0
var x = document.getElementById['test'];1
var x = document.getElementById['test'];0
x.innerText
// => "Warning: This element contains code and strong language."
8x.textContent
// => "
// => Warning: This element contains code and strong language.
// => "
2x.innerText
// => "Warning: This element contains code and strong language."
6
document.getElementById['example-input'].value //=> "default"
// User changes input to "something"
document.getElementById['example-input'].value //=> "something"
8
document.getElementById['example-input'].value //=> "default"
// User changes input to "something"
document.getElementById['example-input'].value //=> "something"
9x.textContent
// => "
// => Warning: This element contains code and strong language.
// => "
6var x = document.getElementById['test'];9
x.textContent
// => "
// => Warning: This element contains code and strong language.
// => "
2x.value // => null
1var x = document.getElementById['test'];6
x.innerText
// => "Warning: This element contains code and strong language."
8x.textContent
// => "
// => Warning: This element contains code and strong language.
// => "
2x.innerText
// => "Warning: This element contains code and strong language."
6var x = document.getElementById['test'];6
var x = document.getElementById['test'];
07x.textContent
// => "
// => Warning: This element contains code and strong language.
// => "
6var x = document.getElementById['test'];
5x.textContent
// => "
// => Warning: This element contains code and strong language.
// => "
2x.value // => null
1var x = document.getElementById['test'];6
x.innerText
// => "Warning: This element contains code and strong language."
8x.textContent
// => "
// => Warning: This element contains code and strong language.
// => "
2x.innerText
// => "Warning: This element contains code and strong language."
6var x = document.getElementById['test'];0
var x = document.getElementById['test'];
17var x = document.getElementById['test'];0
x.innerText
// => "Warning: This element contains code and strong language."
8x.textContent
// => "
// => Warning: This element contains code and strong language.
// => "
2x.innerText
// => "Warning: This element contains code and strong language."
6var x = document.getElementById['test'];
22x.innerText
// => "Warning: This element contains code and strong language."
8x.textContent
// => "
// => Warning: This element contains code and strong language.
// => "
6var x = document.getElementById['test'];
25var x = document.getElementById['test'];
26var x = document.getElementById['test'];
27var x = document.getElementById['test'];
26var x = document.getElementById['test'];
29x.textContent
// => "
// => Warning: This element contains code and strong language.
// => "
6var x = document.getElementById['test'];
31x.textContent
// => "
// => Warning: This element contains code and strong language.
// => "
6var x = document.getElementById['test'];
33var x = document.getElementById['test'];
26var x = document.getElementById['test'];
27var x = document.getElementById['test'];
26var x = document.getElementById['test'];
37x.textContent
// => "
// => Warning: This element contains code and strong language.
// => "
6var x = document.getElementById['test'];
31x.textContent
// => "
// => Warning: This element contains code and strong language.
// => "
2x.value // => null
1var x = document.getElementById['test'];
22x.innerText
// => "Warning: This element contains code and strong language."
8x.value // => null
1x.value // => null
8x.innerText
// => "Warning: This element contains code and strong language."
8x.value // => null
1x.innerText
// => "Warning: This element contains code and strong language."
7x.innerText
// => "Warning: This element contains code and strong language."
8Output
Trước khi nhấp vào:
Sau khi nhấp vào bên trong
Sau khi nhấp vào bên trong:
Differences:
Như chúng ta có thể thấy từ ví dụ ở trên thuộc tính bên trong đặt hoặc trả về nội dung văn bản dưới dạng văn bản đơn giản của nút được chỉ định và tất cả các hậu duệ của nó trong khi thuộc tính bên trong nhận được và đặt nội dung văn bản hoặc HTML đơn giản trong các phần tử. Không giống như bên trong, HTML bên trong cho phép bạn làm việc với văn bản phong phú HTML và không tự động mã hóa và giải mã văn bản.innerText property sets or returns the text content as plain text of the specified node, and all its descendants whereas the innerHTML property gets and sets the plain text or HTML contents in the elements. Unlike innerText, inner HTML lets you work with HTML rich text and doesn’t automatically encode and decode text.