Hướng dẫn what is difference between innerhtml and innertext in javascript? - Sự khác biệt giữa innerhtml và innertext trong javascript 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>code</code> and strong language. // => " 7
x.innerHTML // => " // => Warning: This element contains <code>code</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".
Cái nào tốt hơn bên trong hoặc bên trong?
Sự khác biệt giữa bên trong bên trong và văn bản là gì?
Sự khác biệt giữa .innerhtml và .value trong javascript là gì?
Sự khác biệt giữa TextContent và Innertext là gì?

<div id="test">
   Warning: This element contains <code>code</code> and <strong>strong language</strong>.
</div>

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>code</code> and <strong>strong language</strong>.
// => "

Đâ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>code</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>code</code> and <strong>strong language</strong>.
// => "

4 cho các yếu tố không bao giờ được hiển thị như

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

5 và `

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

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

6

x.innerHTML // => " // => Warning: This element contains <code>code</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>code</code> and <strong>strong language</strong>.
// => "

6

x.innerHTML // => " // => Warning: This element contains <code>code</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".

<input id="example-input" type="text" value="default" />
<script>
  document.getElementById('example-input').value //=> "default"
  // User changes input to "something"
  document.getElementById('example-input').value //=> "something"
</script>

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

<div id="test">
  Warning: This element contains <code>code</code> and <strong>strong language</strong>.
</div>
<textarea id="output" rows="12" cols="80" style="font-family: monospace;"></textarea>

Xem thảo luận

Cải thiện bài viết

Lưu bài viết

Đọc

Bàn luận

Xem thảo 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

Các

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

6

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

6

<div id="test">
  Warning: This element contains <code>code</code> and <strong>strong language</strong>.
</div>
<textarea id="output" rows="12" cols="80" style="font-family: monospace;"></textarea>

0

<div id="test">
  Warning: This element contains <code>code</code> and <strong>strong language</strong>.
</div>
<textarea id="output" rows="12" cols="80" style="font-family: monospace;"></textarea>

1

<div id="test">
  Warning: This element contains <code>code</code> and <strong>strong language</strong>.
</div>
<textarea id="output" rows="12" cols="80" style="font-family: monospace;"></textarea>

0

<div id="test">
  Warning: This element contains <code>code</code> and <strong>strong language</strong>.
</div>
<textarea id="output" rows="12" cols="80" style="font-family: monospace;"></textarea>

3

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

2

x.value // => null

1

<input id="example-input" type="text" value="default" />
<script>
  document.getElementById('example-input').value //=> "default"
  // User changes input to "something"
  document.getElementById('example-input').value //=> "something"
</script>

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

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

6

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

7

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:

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.

Cái nào tốt hơn bên trong hoặc bên trong?

InnerText và InsideHtml là các thuộc tính của JavaScript. ... khác biệt giữa bên trong và bên trong và bên trong ..

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

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ử.Thuộc tính TextContent Trả về: Nội dung văn bản của phần tử và tất cả các hậu duệ, với khoảng cách và văn bản ẩn CSS, nhưng không có thẻ.

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

Giá trị cung cấp cho bạn giá trị hiện tại của một phần tử biểu mẫu (đầu vào, chọn, textarea), trong khi .innerhtml xây dựng chuỗi HTML dựa trên các nút dom mà phần tử chứa. innerHTML builds an HTML string based on the DOM nodes the element contains.

Sự khác biệt giữa TextContent và Innertext là gì?

TextContent có được nội dung của tất cả các yếu tố, bao gồm và các yếu tố. Tương phản, bên trong chỉ hiển thị các yếu tố "có thể đọc được" của con người.TextContent Trả về mọi phần tử trong nút.Ngược lại, bên trong nhận thức được kiểu dáng và sẽ không trả lại văn bản của các yếu tố "ẩn". In contrast, innerText only shows "human-readable" elements. textContent returns every element in the node. In contrast, innerText is aware of styling and won't return the text of "hidden" elements.

programming javascript Innertext là gì innerText innerText trong JS innerText vs innerHTML innerText jQuery