Sự khác biệt giữa InternalText và InternalHTML

Sự khác nhau giữa là gì innerHTML, innerTextvà childNodes[].valuetrong JavaScript?

innerTextTuy nhiên, không giống như , innerHTMLcho phép bạn làm việc với văn bản có định dạng HTML và không tự động mã hóa và giải mã văn bản. Nói cách khác, innerTextlấy và đặt nội dung của thẻ dưới dạng văn bản thuần túy, trong khi innerHTMLlấy và đặt nội dung ở định dạng HTML.

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

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

element.innerHTML

Đặt hoặc lấy cú pháp HTML mô tả hậu duệ 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 ý đó là một tài sản của Elementcác đối tượng.

node.innerText

Đặt hoặc lấy 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."

• innerTextđượ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, innerTextđã được WHATWG thông qua và được thêm vào Firefox vào năm 45.
• innerText cung cấp cho bạn một văn bản, đại diện cho văn bản cố gắng khớp với những gì được trình duyệt hiển thị trong điều này có nghĩa là:
  • innerTextáp dụng text-transformvà white-spacequy tắc
  • innerText cắt khoảng trắng giữa các dòng và thêm ngắt dòng giữa các mục
  • innerText sẽ không trả lại văn bản cho các mục vô hình
• innerTextsẽ trả về textContentcác phần tử không bao giờ được hiển thị như thế nào <style />và `
• Tài sản của Nodecác yếu tố

node.textContent

Gets 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à 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 bị ẩn bởi CSS
• Không kích hoạt một dòng chảy lại (do đó hiệu suất cao hơn)
• Tài sản của Nodecác yếu tố

node.value

Đ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, xtrả về một đối tượng HTMLDivE bổ sung , không có thuộc valuetính được xác định.

x.value // => null

Các thẻ đầu vào ( <input />), ví dụ, xác định một thuộc valuetính , tham chiếu đế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>

Từ các tài liệu :

Lưu ý: đối với một số loại đầu vào, 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 là số vào một <input type="number">, thay vào đó giá trị được trả về có thể là một chuỗi rỗng.

Kịch bản mẫu

Đây là một ví dụ cho thấy đầu ra cho HTML được trình bày ở 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]);
}

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

InnerTextthuộc tính html mã hóa nội dung, chuyển <p>sang <p>, v.v. Nếu bạn muốn chèn các thẻ HTML bạn cần sử dụng InnerHTML.

Nói một cách đơn giản:

1. innerTextsẽ hiển thị giá trị như hiện có và bỏ qua mọi HTMLđịnh dạng có thể được bao gồm.
2. innerHTMLsẽ hiển thị giá trị và áp dụng bất kỳ HTMLđịnh dạng.

var element = document.getElementById("main");
var values = element.childNodes[1].innerText;
alert('the value is:' + values);

Để tiếp tục tinh chỉnh nó và lấy giá trị Alec chẳng hạn, hãy sử dụng .childNodes khác [1]

var element = document.getElementById("main");
var values = element.childNodes[1].childNodes[1].innerText;
alert('the value is:' + values);

Về mặt MutationObservers, cài đặt innerHTMLtạo childListđột biến do các trình duyệt loại bỏ nút và sau đó thêm một nút mới với giá trị làinnerHTML .

Nếu bạn đặt innerText, một characterDatađột biến được tạo ra.

Sự khác biệt duy nhất giữa innerTextvà innerHTMLlà innerTextchèn chuỗi như nó vào phần tử, trong khi innerHTMLchạy nó dưới dạng nội dung html.

const ourstring = 'My name is <b class="name">Satish chandra Gupta</b>.';
document.getElementById('innertext').innerText = ourstring;
document.getElementById('innerhtml').innerHTML = ourstring;

.name{
color:red;
}

<h3>Inner text below. It inject string as it is into the element.</h3>
<div id="innertext"></div>
<br />
<h3>Inner html below. It renders the string into the element and treat as part of html document.</h3>
<div id="innerhtml"></div>

InnerTextsẽ chỉ trả về giá trị văn bản của trang với mỗi thành phần trên dòng mới bằng văn bản thuần túy, trong khi innerHTMLsẽ trả về nội dung HTML của mọi thứ bên trong bodythẻ và childNodessẽ trả về danh sách các nút, như tên cho thấy.

Các innerTexttài sản trả về văn bản thực tế giá trị của một phần tử html trong khi innerHTMLtrả về HTML content. Ví dụ dưới đây:

var element = document.getElementById('hello');
element.innerText = '<strong> hello world </strong>';
console.log('The innerText property will not parse the html tags as html tags but as normal text:\n' + element.innerText);

console.log('The innerHTML element property will encode the html tags found inside the text of the element:\n' + element.innerHTML);
element.innerHTML = '<strong> hello world </strong>';
console.log('The <strong> tag we put above has been parsed using the innerHTML property so the .innerText will not show them \n ' + element.innerText);
console.log(element.innerHTML);

<p id="hello"> Hello world 
</p>

để thêm vào danh sách, InternalText sẽ giữ cho biến đổi văn bản của bạn, bên trongHTML sẽ không