Warning: This element contains Các ví dụ dưới đây đề cập đến đoạn mã HTML sau :Nút sẽ được tham chiếu bởi JavaScript sau : Đặt hoặc lấy cú pháp HTML miêu tả thành phần con của thành phần Đây là một phần của Đặc điểm phân tích cú pháp DOM và Serialization của W3C. Lưu ý rằng đó là một thuộc tính của Đặt hoặc lấy văn bản giữa thẻ mở màn và thẻ kết thúc của đối tượng
người tiêu dùng người dùng Lấy hoặc đặt nội dung văn bản của một nút và con cháu của nó . Mặc dù đây là tiêu chuẩn W3C, nhưng nó không được tương hỗ bởi IE < 9 . Điều này phụ thuộc vào yếu tố mà bạn đã nhắm mục tiêu. Đối với ví dụ trên, Từ những tài liệu :code
and strong language.
var x = document.getElementById['test'];
element.innerHTML
x.innerHTML
// => "
// => Warning: This element contains
code
and strong language.
// => "
Element
các đối tượng.node.innerText
x.innerText
// => "Warning: This element contains code and strong language."
innerText
được giới thiệu bởi Microsoft và đã được Firefox hỗ trợ trong một thời gian. Vào tháng 8 năm 2016, innerText
được thông qua bởi WHATWG và được thêm vào Firefox trong phiên bản v45.innerText
cung cấp cho bạn nhận thức về phong cách, biểu diễn của văn bản cố gắng khớp với những gì được trình duyệt hiển thị, điều này có nghĩa là: innerText
áp dụng text-transform
và white-space
quy tắcinnerText
cắt bớt khoảng trắng giữa các dòng và thêm
ngắt dòng giữa các mụcinnerText
sẽ không trả lại văn bản cho các mục ẩninnerText
sẽ trả về textContent
cho các phần tử không bao giờ được hiển thị như
và `
Node
các phần tửnode.textContent
x.textContent
// => "
// => Warning: This element contains code and strong language.
// => "
Node
các phần tửnode.value
x
trả về một đối tượng HTMLDivElement, đối tượng này không có thuộc value
tính được xác định.x.value // => null
Ví dụ: thẻ đầu vào [ ] xác định một thuộc
value
tính, tham chiếu đến “giá trị hiện tại trong điều khiển”.
Lưu ý: đối với một số loại đầu vào nhất định, giá trị trả về có thể không khớp với giá trị mà người dùng đã nhập. Ví dụ: nếu người dùng nhập một giá trị không phải số vào một
, giá trị trả về có thể là một chuỗi trống.
Tập lệnh mẫu
Dưới đây là một ví dụ hiển thị đầu ra cho HTML được trình diễn ở trên :
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.
Mở rộng đoạn mã
Difference Between innerText vs innerHTML
The following article provides an outline for innerText vs innerHTML. innerText and innerHTML are the JavaScript properties. innerText property returns plain text and removes the spacing, and has compatibility. innerHtml displays content between labels, including text content and the tags and is supported by all the browsers. Html is a markup language used for the development of web pages. This innerHtml will be presented for replacing selected tags and content.
Head to Head Comparison Between innerText vs innerHTML [Infographics]
Below are the top 9 differences between innerText vs innerHTML:
Key Difference Between innerText vs innerHTML
Let us discuss some of the major key differences between innerText vs innerHTML:
- The differences are tackled in which the text is handled. innerText is very similar to the textContent. However, the innerText inserts a string as the input to the element while innerHTML runs and executes the element as HTML content.
- innerHtml makes to works with HTML rich text, and they don’t perform encode and decode text automatically. innerText renderers text contents while inner HTML parses HTML entities within the element.
- innerText doesn’t work in all the browsers as it is not valid in Firefox and was later added to Firefox v45.
- innerHtml are vulnerable to XSS attacks, but this is not the case in InnerText. Instead, using inner Html causes the web browsers to reparse all the available DOM elements inside the HTML code. In other terms, creating a new element and DOM appends it gives better performance.
- innerText applies style-aware representation and gives style transformation. To all intents, innerText is significantly slower. To go for style awareness, we can use inner Html instead.
- innerText seeks some information from the layout system to brief how the text is displayed to the user. This makes the app performance go away the rails.
Examples of innerText vs innerHTML
Given below are the examples of innerText vs innerHTML:
So here, we need to extract text from the HTML elements. Here is a quick example we can try this in any chosen editor.
Example #1
Code:
Javascript Properties
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.output,
.start1 {
font-size: 16px;
font-weight: 400;
color: blue;
}
Demo on innerHTML vs innerText
Press here
Press above button to see the working Process
let Bn = document.querySelector[".Click_Btn"];
let res = document.querySelectorAll[".output"];
let startel = document.querySelector[".start1"];
let x;
BtnEle.addEventListener["click", [] => {
res[0].innerHTMLclass += startel.innerHTMLclass;
res[1].innerHTMLclass +=startel.innerTextclass;
}];
Explanation:
- In the above code, we need to extract a text part individually and, in other class, an HTML tag too. So we have written a few JavaScript codes to take out the working process.
Output:
Example #2
Code:
Source element:
#original { color: blue; } #text { text-transform: lowercase; }
Easiest way
to learn the course
is followed
below.
No Content
Output of TextContent Property:
...
Output of innerText:
...
.js:
const original = document.getElementById["original"];
const textdemo = document.getElementById["textdemo"];
const innerTextdemo = document.getElementById["innerTextdemo"];
textdemo.value = original.textContent;
innerTextdemo.value = original.innerText;
Example #3
Code:
This is EDUCBA This is EDUCBA This is EDUCBA
Sample Document
var b1 = document.getElementById["b1"];
console.log[ss1];
Explanation:
- The above code prints the content in the Text area with the innerText property.
Output:
Example #4
Code: