ความแตกต่างระหว่าง innerText และ innerHTML

ความแตกต่างระหว่างคืออะไรinnerHTML, innerTextและchildNodes[].valueใน JavaScript?

innerTextแม้ว่าจะไม่เหมือนกับinnerHTMLให้คุณทำงานกับ HTML rich text และจะไม่เข้ารหัสและถอดรหัสข้อความโดยอัตโนมัติ กล่าวคือinnerTextดึงและกำหนดเนื้อหาของแท็กเป็นข้อความธรรมดาในขณะที่innerHTMLดึงและตั้งเนื้อหาในรูปแบบ HTML

ตัวอย่างด้านล่างอ้างถึงตัวอย่าง HTML ต่อไปนี้:

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

โหนดจะถูกอ้างอิงโดย JavaScript ต่อไปนี้:

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

element.innerHTML

ตั้งค่าหรือรับไวยากรณ์ HTML ที่อธิบายถึงการสืบทอดขององค์ประกอบ

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

นี้เป็นส่วนหนึ่งของ W3C ของDOM แยกและเป็นอันดับจำเพาะ โปรดทราบว่ามันเป็นคุณสมบัติของElementวัตถุ

node.innerText

ตั้งค่าหรือรับข้อความระหว่างแท็กเริ่มต้นและแท็กสิ้นสุดของวัตถุ

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

• innerTextได้รับการแนะนำโดย Microsoft และไม่ได้รับการสนับสนุนในขณะที่ Firefox ในเดือนสิงหาคมปี 2559 WHATWGinnerTextได้รับการรับรองและถูกเพิ่มเข้าใน Firefox ใน v45
• innerText ช่วยให้คุณตระหนักถึงรูปแบบการแสดงข้อความที่พยายามจับคู่สิ่งที่เบราว์เซอร์แสดงผลหมายความว่า
  • innerTextใช้text-transformและwhite-spaceกฎ
  • innerText ตัดขอบช่องว่างระหว่างบรรทัดและเพิ่มตัวแบ่งบรรทัดระหว่างรายการ
  • innerText จะไม่ส่งคืนข้อความสำหรับรายการที่มองไม่เห็น
• innerTextจะกลับมาtextContentสำหรับองค์ประกอบที่ไม่เคยแสดงเช่น<style />และ `
• คุณสมบัติของNodeองค์ประกอบ

node.textContent

รับหรือตั้งค่าเนื้อหาข้อความของโหนดและการสืบทอด

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

แม้ว่านี่จะเป็นมาตรฐาน W3Cแต่ก็ไม่รองรับ IE <9

• ไม่ทราบถึงการกำหนดสไตล์และดังนั้นจะส่งคืนเนื้อหาที่ซ่อนอยู่โดย CSS
• ไม่ก่อให้เกิด reflow (ดังนั้นจึงมีประสิทธิภาพมากกว่า)
• คุณสมบัติของNodeองค์ประกอบ

node.value

สิ่งนี้ขึ้นอยู่กับองค์ประกอบที่คุณกำหนดเป้าหมาย สำหรับตัวอย่างข้างต้นxส่งคืนวัตถุHTMLDivElementซึ่งไม่มีvalueคุณสมบัติที่กำหนดไว้

x.value // => null

<input />ตัวอย่างเช่นแท็กอินพุต ( ) กำหนดvalueคุณสมบัติซึ่งอ้างอิงถึง "ค่าปัจจุบันในตัวควบคุม"

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

จากเอกสาร :

หมายเหตุ: สำหรับอินพุตบางประเภทค่าที่ส่งคืนอาจไม่ตรงกับค่าที่ผู้ใช้ป้อน ตัวอย่างเช่นหากผู้ใช้ป้อนค่าที่ไม่ใช่ตัวเลขลงในค่า<input type="number">ที่ส่งคืนอาจเป็นสตริงว่างแทน

สคริปต์ตัวอย่าง

นี่คือตัวอย่างที่แสดงผลลัพธ์สำหรับ HTML ที่แสดงด้านบน:

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>

InnerTextคุณสมบัติ HTML เข้ารหัสเนื้อหาที่เปลี่ยน<p>ไป<p>ฯลฯ หากคุณต้องการแทรกแท็ก HTML InnerHTMLที่คุณจำเป็นต้องใช้

ในคำง่าย ๆ :

1. innerTextจะแสดงค่าตามที่เป็นและละเว้นการHTMLจัดรูปแบบใด ๆที่อาจรวมอยู่
2. innerHTMLจะแสดงค่าและใช้การHTMLจัดรูปแบบใด ๆ

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

หากต้องการปรับแต่งเพิ่มเติมและเรียกคืนค่า Alec ให้ใช้. childNodes อื่น [1]

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

ในแง่ของMutationObserversการตั้งค่าinnerHTMLสร้างการกลายพันธุ์เนื่องจากเบราว์เซอร์ลบโหนดแล้วเพิ่มโหนดใหม่ที่มีค่าของchildListinnerHTML

หากคุณตั้งค่าinnerTextการcharacterDataกลายพันธุ์จะถูกสร้างขึ้น

ข้อแตกต่างระหว่างinnerTextและinnerHTMLคือinnerTextใส่สตริงตามที่อยู่ในองค์ประกอบขณะที่innerHTMLเรียกใช้เป็นเนื้อหา 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>

InnerTextจะส่งคืนค่าข้อความของหน้าเว็บที่มีองค์ประกอบแต่ละรายการในบรรทัดใหม่ในข้อความธรรมดาในขณะที่innerHTMLจะส่งคืนเนื้อหา HTML ของทุกสิ่งภายในbodyแท็กและchildNodesจะส่งคืนรายการโหนดตามชื่อที่แนะนำ

innerTextคุณสมบัติส่งกลับข้อความจริงมูลค่าขององค์ประกอบ HTML ในขณะที่ส่งกลับinnerHTML HTML contentตัวอย่างด้านล่าง:

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>

เพื่อเพิ่มลงในรายการ InnerText จะเก็บการแปลงข้อความของคุณไว้ด้านใน HTML