ইনটারটেক্সট এবং অভ্যন্তর এইচটিএমএল এর মধ্যে পার্থক্য

Question

মধ্যে পার্থক্য কি innerHTML, innerTextএবং childNodes[].valueজাভাস্ক্রিপ্ট মধ্যে?

Comments

@tymeJV সত্যই, innerTextMSIE দ্বারা টেক্সট কনটেক্সট-এর একটি মানহীন বাস্তবায়ন এর সাথে পার্থক্যটি নগণ্য।

— fny

ফায়ারফক্সে ইনারটেক্সট কাজ না করা ছাড়াও: টেক্সট কনটেন্টটি সমস্ত বড় ব্রাউজারে কাজ করছে বলে মনে হয়, তাই কেবল ইনারটেক্সটের পরিবর্তে টেক্সট কনটেন্ট ব্যবহার করুন।

— auco

গুরুত্বপূর্ণ দ্রষ্টব্য: উপরের 3 টি মন্তব্য আর বৈধ নয়। innerTextমানগুলিতে যুক্ত করা হয়েছে এবং সমস্ত বড় ব্রাউজার দ্বারা সমর্থিত। textContentএখন আইআই> = 9 দ্বারা সমর্থিত innerTextএবং বেশিরভাগ ক্ষেত্রে পরিবর্তে এটি ব্যবহার করা যেতে পারে (বোনাস, এটি অনেক দ্রুত) তবে উভয়ের মধ্যে পার্থক্য রয়েছে, তাই কিছু ক্ষেত্রে আপনি এগুলিকে অদলবদল করতে পারবেন না।

— র্যাকিল হিলান

আপডেট 2019: innerTextসমস্ত ব্রাউজারে ভাল সমর্থিত। ফায়ারফক্স 45 সংস্করণ থেকে এটি সমর্থন করা শুরু করে can caniuse.com/#search=innertext

— আদিত্য গুপ্ত

আমি অবাক হই যে এখানে সুরক্ষার সমাধান করা হয়নি। innerHTML এক্সএসএস আক্রমণগুলির জন্য একটি পরিচিত দুর্বলতা। এটি বলেছিল যে, innerText100% নিরাপদও নয়। stackoverflow.com/questions/52707031/does-innertext-prevent-xss blog.cloudboost.io/...

— davidhartman00

Answer 1

innerTextযদিও এর বিপরীতে , innerHTMLআপনাকে HTML সমৃদ্ধ পাঠ্যের সাথে কাজ করতে দেয় এবং পাঠ্যটিকে স্বয়ংক্রিয়ভাবে এনকোড এবং ডিকোড করে না। অন্য কথায়, innerTextট্যাগের বিষয়বস্তুটিকে সরল পাঠ্য হিসাবে innerHTMLপুনরুদ্ধার এবং সেট করে , যেখানে এইচটিএমএল ফর্ম্যাটে সামগ্রীটি পুনরুদ্ধার ও সেট করে।

Comments

অন্য জবাবের নীচে স্বীকৃত উত্তর @ জোরের মন্তব্যে এখানে পেস্ট করা খুব গুরুত্বপূর্ণ: "কেবল স্বচ্ছতার জন্য: এটি তখনই প্রযোজ্য যখন একটি মান সেট করা হয়। আপনি যখন মানটি পাবেন তখন এইচটিএমএল ট্যাগগুলি সহজভাবে ছাঁটাই হয়ে যায় এবং আপনি সরল পাঠ্য পাবেন" "

— হিটার

Answer 2

নীচের উদাহরণগুলি নিম্নলিখিত এইচটিএমএল স্নিপেটকে বোঝায়:

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

নোড নিম্নলিখিত জাভাস্ক্রিপ্ট দ্বারা রেফারেন্স করা হবে:

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

element.innerHTML

উপাদানটির বংশধরদের বর্ণনা করে HTML সিনট্যাক্স সেট করে বা পায়

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

এটি ডাব্লু 3 সি এর ডোম পার্সিং এবং সিরিয়ালাইজেশন নির্দিষ্টকরণের অংশ । এটি Elementবস্তুর একটি সম্পত্তি নোট করুন ।

node.innerText

বস্তুর শুরু এবং শেষ ট্যাগের মধ্যে পাঠ্য সেট করে বা পায়

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

• innerTextমাইক্রোসফ্ট দ্বারা প্রবর্তিত হয়েছিল এবং ফায়ারফক্সের দ্বারা কিছুক্ষণ অসমর্থিত ছিল। 2016 এর আগস্টে innerTextছিল WHATWG দ্বারা গৃহীত এবং v45 ফায়ারফক্স যোগ করা হয়েছিল।
• innerText আপনাকে একটি স্টাইল-সচেতন, সেই পাঠ্যের উপস্থাপনা দেয় যা ব্রাউজারের দ্বারা রেন্ডার করা হয়েছে যা এর সাথে মিলে যাওয়ার চেষ্টা করে যার অর্থ:
  • innerTextপ্রয়োগ text-transformএবং white-spaceবিধি
  • innerText লাইনের মধ্যে সাদা স্থান ছাঁটাই করে এবং আইটেমগুলির মধ্যে লাইন বিরতি যুক্ত করে
  • innerText অদৃশ্য আইটেমগুলির জন্য পাঠ্য ফেরত দেবে না
• innerTexttextContentএমন উপাদানগুলির জন্য ফিরে আসবে যা কখনই পছন্দ করে না <style />এবং `
• Nodeউপাদান সম্পত্তি

node.textContent

কোনও নোড এবং এর বংশধরের পাঠ্য সামগ্রী প্রাপ্ত বা সেট করে।

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

যদিও এটি একটি ডাব্লু 3 সি স্ট্যান্ডার্ড , এটি আই <9 দ্বারা সমর্থিত নয়।

• স্টাইলিং সম্পর্কে সচেতন নয় এবং তাই সিএসএসের দ্বারা লুকানো সামগ্রী ফিরে আসবে
• একটি রিফ্লো ট্রিগার করে না (সুতরাং আরও পারফরম্যান্ট)
• 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">তবে প্রত্যাবর্তিত মান পরিবর্তে একটি খালি স্ট্রিং হতে পারে।

নমুনা স্ক্রিপ্ট

উপরে উপস্থাপিত এইচটিএমএলটির আউটপুট দেখায় এমন একটি উদাহরণ এখানে:

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>

Comments

এমনকি ফায়ারফক্সের সাম্প্রতিকতম সংস্করণগুলি সমর্থন করে না innerText: quirksmode.org/dom/html এবং quirksmode.org/dom/tests/innerhtml.html

— ল্যামবার্গ

চারটি বৈশিষ্ট্যের প্রত্যেকটি (ইনারএইচটিএমএল, ইন্টার্নটেক্সট, টেক্সট কনটেন্ট, মান) দুটি সাবহেডিংয়ে বিভক্ত করা সহায়ক হবে: "আচরণ" এবং "সেট" আচরণ করুন।

— লুক হাচিসন

বিকাশকারী.মোজিলা.অর্গ.এইন- Firefox >=45 ইউএস / ডকস / ওয়েবে / এপিআই / নোড / ইনারটেক্সট অনুসারে সমর্থিত।

— কিলমাজিং

আমি যদি এমডিএনকে সঠিকভাবে বুঝতে পারি তবে innerTextএখন এটি স্ট্যান্ডার্ডের একটি অংশ এবং এটি ফায়ারফক্সের 45 সংস্করণে সমর্থন করা উচিত; এই দুর্দান্ত উত্তরে @ ফারাজ

— ডমসন

এটি , তে , ইত্যাদিতে রূপান্তরিতও <হয়<&gt;>

— সারকাস্টিকসুলি

Answer 3

InnerTextবৈশিষ্ট্য এইচটিএমএল সামগ্রীগুলি এনকোড করে, এগুলি ঘুরিয়ে <p>দেওয়া <p>ইত্যাদি you আপনি যদি এইচটিএমএল ট্যাগ সন্নিবেশ করতে চান তবে আপনার ব্যবহারের প্রয়োজন InnerHTML।

Comments

কেবল স্বচ্ছতার জন্য: এটি কেবল তখনই প্রয়োগ হয় যখন একটি মান সেট করা হয়। আপনি যখন মান পাচ্ছেন তখন এইচটিএমএল ট্যাগগুলি সহজেই ছিনিয়ে নেওয়া হয় এবং আপনি সরল পাঠ্য পান।

— jor

Answer 4

সহজ কথায়:

1. innerTextমানটি যেমন রয়েছে তেমন দেখায় এবং HTMLএতে অন্তর্ভুক্ত থাকা কোনও ফর্ম্যাটিং উপেক্ষা করে ।
2. innerHTMLমান প্রদর্শন করবে এবং যে কোনও HTMLবিন্যাস প্রয়োগ করবে ।

Answer 5

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

এটি আরও পরিমার্জন করতে এবং উদাহরণস্বরূপ অ্যালেকের মানটি পুনরুদ্ধার করতে, অন্য .childNodes ব্যবহার করুন [1]

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

Answer 6

পদক্ষেপে MutationObservers, সেটিং ব্রাউজারগুলির নোড অপসারণ এবং তার মান সহ একটি নতুন নোড যুক্ত হওয়ার কারণে innerHTMLএকটি childListরূপান্তর তৈরি করে innerHTML।

আপনি যদি সেট করেন তবে innerTextএকটি characterDataরূপান্তর উত্পন্ন হয়।

Answer 7

innerTextএবং এর মধ্যে কেবলমাত্র পার্থক্য innerHTMLহ'ল innerTextএটির মধ্যে যেমন স্ট্রিং sertোকানো হয়, যখন innerHTMLএটি এইচটিএমএল সামগ্রী হিসাবে চালিত হয়।

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>

Answer 8

InnerTextকেবলমাত্র সরল পাঠ্যে একটি নতুন লাইনে প্রতিটি উপাদান দিয়ে পৃষ্ঠার পাঠ্য মানটি ফিরিয়ে দেবে, যখন ট্যাগের innerHTMLঅভ্যন্তরে সমস্ত কিছুর এইচটিএমএল সামগ্রী ফিরে আসবে body, এবং childNodesনাম অনুসারে নোডের একটি তালিকা ফিরে আসবে।

Answer 9

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>

Answer 10

তালিকায় যোগ করতে, ইনারটেক্সটটি আপনার পাঠ্য-রূপান্তর করবে, অভ্যন্তরীণ এইচটিএমএল অভ্যাস করবে না