Hướng dẫn what is the difference between innerhtml and inner text? - sự khác biệt giữa innerhtml và văn bản bên trong là gì?

Question

Các ví dụ dưới đây đề cập đến đoạn trích HTML sau:

Nội dung chính Show

var x = document.getElementById('test'); 2
var x = document.getElementById('test'); 4
x.innerHTML // => " // => Warning: This element contains code and strong language. // => " 7
x.innerHTML // => " // => Warning: This element contains code and strong language. // => " 9
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".
Sự khác biệt giữa văn bản bên trong và HTML bên trong là gì?
Văn bản bên trong trong HTML là gì?
Sự khác biệt giữa .innerhtml và .value trong javascript là gì?
Tôi nên sử dụng InnerHTML hay Internaltext?


   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

Đặ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

Đặ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."

```
var x = document.getElementById('test');
```
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ắc
```
var x = document.getElementById('test');
```
  9 và
```
x.innerHTML
// => "
// =>   Warning: This element contains code and strong language.
// => "
```
  0
- ```
var x = document.getElementById('test');
```
  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ục
- ```
var x = document.getElementById('test');
```
  5 sẽ không trả lại văn bản cho các mục vô hình

var x = document.getElementById('test');

5 sẽ trở lại

x.innerHTML
// => "
// =>   Warning: This element contains code and strong language.
// => "

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à `

Thuộc tính của các yếu tố

x.innerHTML
// => "
// =>   Warning: This element contains code and strong language.
// => "

6

x.innerHTML // => " // => Warning: This element contains `code` and strong language. // => " 7

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 <9 hỗ trợ.

Không biết về kiểu dáng và do đó sẽ trả về nội dung được ẩn bởi CSS
Không kích hoạt một refer (do đó hiệu suất hơn)

Thuộc tính của các yếu tố

x.innerHTML
// => "
// =>   Warning: This element contains code and strong language.
// => "

6

x.innerHTML // => " // => Warning: This element contains `code` and strong language. // => " 9

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 <9 hỗ trợ.

Không biết về kiểu dáng và do đó sẽ trả về nội dung được ẩn bởi CSS

Không kích hoạt một refer (do đó hiệu suất hơn)

Đ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,
x.innerText
// => "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".

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

Bàn luận

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

1

Example:

Nội tâm

x.innerText
// => "Warning: This element contains code and strong language."

5

x.innerText
// => "Warning: This element contains code and strong language."

6

x.innerText
// => "Warning: This element contains code and strong language."

7

x.innerText
// => "Warning: This element contains code and strong language."

8

x.innerText
// => "Warning: This element contains code and strong language."

6

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

0

x.innerText
// => "Warning: This element contains code and strong language."

8

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

2

x.innerText
// => "Warning: This element contains code and strong language."

6

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

4

x.innerText
// => "Warning: This element contains code and strong language."

8

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

6

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

7

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

8

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

9

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

2

x.value // => null

1

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

4

x.innerText
// => "Warning: This element contains code and strong language."

8

x.value // => null

1

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

0

x.innerText
// => "Warning: This element contains code and strong language."

8

Nội tâm

HTML

x.innerText
// => "Warning: This element contains code and strong language."

6

x.value // => null

8

x.value // => null

9

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

6

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]);
}

1

0

x.innerText
// => "Warning: This element contains code and strong language."

6

2

3

2

x.innerText
// => "Warning: This element contains code and strong language."

8

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

6

x.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.

3

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

2

x.value // => null

1

8

x.innerText
// => "Warning: This element contains code and strong language."

8

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

2

x.innerText
// => "Warning: This element contains code and strong language."

6

var 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."

8

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

2

x.innerText
// => "Warning: This element contains code and strong language."

6

8

9

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

6

var x = document.getElementById('test');

9

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

2

x.value // => null

1

var x = document.getElementById('test');

6

x.innerText
// => "Warning: This element contains code and strong language."

8

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

2

x.innerText
// => "Warning: This element contains code and strong language."

6

var x = document.getElementById('test');

6

var x = document.getElementById('test');

07

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

6

var x = document.getElementById('test');

5

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

2

x.value // => null

1

var x = document.getElementById('test');

6

x.innerText
// => "Warning: This element contains code and strong language."

8

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

2

x.innerText
// => "Warning: This element contains code and strong language."

6

var x = document.getElementById('test');

0

var x = document.getElementById('test');

17

var x = document.getElementById('test');

0

x.innerText
// => "Warning: This element contains code and strong language."

8

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

2

x.innerText
// => "Warning: This element contains code and strong language."

6

var x = document.getElementById('test');

22

x.innerText
// => "Warning: This element contains code and strong language."

8

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

6

var x = document.getElementById('test');

25

var x = document.getElementById('test');

26

var x = document.getElementById('test');

27

var x = document.getElementById('test');

26

var x = document.getElementById('test');

29

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

6

var x = document.getElementById('test');

31

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

6

var x = document.getElementById('test');

33

var x = document.getElementById('test');

26

var x = document.getElementById('test');

27

var x = document.getElementById('test');

26

var x = document.getElementById('test');

37

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

6

var x = document.getElementById('test');

31

x.textContent
// => "
// =>   Warning: This element contains code and strong language.
// => "

2

x.value // => null

1

var x = document.getElementById('test');

22

x.innerText
// => "Warning: This element contains code and strong language."

8

x.value // => null

1

x.value // => null

8

x.innerText
// => "Warning: This element contains code and strong language."

8

x.value // => null

1

x.innerText
// => "Warning: This element contains code and strong language."

7

x.innerText
// => "Warning: This element contains code and strong language."

8

Output

Trước khi nhấp vào:

Hướng dẫn what is the difference between innerhtml and inner text? - sự khác biệt giữa innerhtml và văn bản bên trong là gì?

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.

Sự khác biệt giữa văn bản bên trong và HTML bên trong là gì?

Sự khác biệt giữa thuộc tính bên trong trả về: Nội dung văn bản của phần tử, bao gồm tất cả các thẻ HTML khoảng cách và bên trong.Thuộc tính bên trong trả về: Chỉ nội dung văn bản của phần tử và tất cả trẻ em của nó, không có khoảng cách và thẻ văn bản ẩn CSS, ngoại trừ và các phần tử.

Văn bản bên trong trong HTML là gì?

Thuộc tính bên trong của giao diện htmlelement đại diện cho nội dung văn bản được hiển thị của một nút và hậu duệ của nó.Là một người nhận, nó gần đúng với văn bản mà người dùng sẽ nhận được nếu họ tô sáng nội dung của phần tử với con trỏ và sau đó sao chép nó vào bảng tạm.represents the rendered text content of a node and its descendants. As a getter, it approximates the text the user would get if they highlighted the contents of the element with the cursor and then copied it to the clipboard.

Sự khác biệt giữa .innerhtml và .value trong javascript là gì?

Giá trị đề cập đến một thuộc tính của một thẻ, trong khi bên trong đề cập đến nội dung giữa đầu và đầu của thẻ..

Tôi nên sử dụng InnerHTML hay Internaltext?

Thuộc tính bên trong html-recodes nội dung, chuyển sang & lt; p & gt;, v.v ... Nếu bạn muốn chèn các thẻ HTML bạn cần sử dụng InnerHTML.If you want to insert HTML tags you need to use InnerHTML .

programming html innerText innerHTML innerText vs innerHTML innerText jQuery

Hướng dẫn what is the difference between innerhtml and inner text? - sự khác biệt giữa innerhtml và văn bản bên trong là gì?

var x = document.getElementById('test'); 2

var x = document.getElementById('test'); 4

x.innerHTML // => " // => Warning: This element contains code and strong language. // => " 7

x.innerHTML // => " // => Warning: This element contains code and strong language. // => " 9

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".

Nội tâm

Sự khác biệt giữa văn bản bên trong và HTML bên trong là gì?

Văn bản bên trong trong HTML là gì?

Sự khác biệt giữa .innerhtml và .value trong javascript là gì?

Tôi nên sử dụng InnerHTML hay Internaltext?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

x.innerHTML // => " // => Warning: This element contains `code` and strong language. // => " 7

x.innerHTML // => " // => Warning: This element contains `code` and strong language. // => " 9