জাভাস্ক্রিপ্ট - অভ্যন্তরীণ এইচটিএমএল ছাড়াই ধারক উপাদানটিতে এইচটিএমএল যুক্ত করুন

Question

আমার অভ্যন্তরীণ এইচটিএমএল ব্যবহার না করে ধারক উপাদানটিতে এইচটিএমএল যুক্ত করার একটি উপায় প্রয়োজন। কেন আমি অভ্যন্তরীণ এইচটিএমএলটি ব্যবহার করতে চাই না তার কারণ হ'ল এটি যখন এটির মতো ব্যবহার হয়:

element.innerHTML += htmldata

এটি পুরানো এইচটিএমএল প্লাস নতুন এইচটিএমএল যুক্ত করার আগে প্রথমে সমস্ত এইচটিএমএলকে প্রতিস্থাপন করে কাজ করে। এটি ভাল নয় কারণ এটি এম্বেড করা ফ্ল্যাশ ভিডিওগুলির মতো গতিময় মিডিয়া পুনরায় সেট করে ...

আমি এটি এইভাবে কাজ করতে পারি যা কাজ করে:

var e = document.createElement('span');
e.innerHTML = htmldata;
element.appendChild(e);

তবে সেই পথে সমস্যাটি হ'ল ডকুমেন্টটিতে সেই অতিরিক্ত স্প্যান ট্যাগটি রয়েছে যা আমি চাই না।

তাহলে কীভাবে এটি করা যায়? ধন্যবাদ!

Comments

জ্যাকুরি কেন ব্যবহার করবেন না? নীচে আমার বিস্তারিত উত্তর চেক করুন। stackoverflow.com/a/50482776/5320562

— Loukan ElKadi

Answer 1

একটি বিকল্প দিতে (যেমন ব্যবহার কাজ DocumentFragmentকরে বলে মনে হচ্ছে না): আপনি সদ্য উত্পন্ন নোডের বাচ্চাদের উপর পুনরাবৃত্তি করে এটি সিমুলেট করতে পারেন এবং কেবল সেগুলি সংযোজন করতে পারেন।

var e = document.createElement('div');
e.innerHTML = htmldata;

while(e.firstChild) {
    element.appendChild(e.firstChild);
}

Comments

আমি ভেবেছিলাম আমরা এমন একটি সমাধান খুঁজছি যা "অভ্যন্তরীণ এইচটিএমএল" ব্যবহার করে না

— কেনেডিলেক্রুজ

@ কেনিডিলেক্রুজ: ওপি বিদ্যমান এইচটিএমএলে নতুন এইচটিএমএল যুক্ত করতে চায় নি কারণ এটি বিদ্যমান উপাদানগুলিকে ধ্বংস করে এবং পুনরায় তৈরি করে। ওপি একটি নতুন উপাদান তৈরি করে একটি সমাধান খুঁজে পেয়েছিল এবং এটি সংযোজন করেছে তবে তারা কোনও অতিরিক্ত উপাদান যুক্ত করতে চায় নি। আমি কেবলমাত্র সলিউশনটি প্রসারিত করে দেখিয়েছি যে তারা সদ্য নির্মিত উপাদানগুলিকে সরিয়ে / সংযুক্ত করতে পারে, যা বিদ্যমান উপাদানগুলিকে প্রভাবিত করে না।

— ফেলিক্স ক্লিং

আমি জানি এটি পুরানো, তবে কেউ কি আমাকে ব্যাখ্যা করতে পারেন কেন কেউ e.firstChild এর মাধ্যমে পুনরাবৃত্তি করতে পারে?

— টোস্টগ্রেট

@Toastgeraet এই উদাহরণ iterating নয় ওভার e.firstChild । বরং এটি পরীক্ষা করে যে eকোনও সন্তান রয়েছে কিনা এবং যদি হ্যাঁ, তবে সেই শিশুটিকে উপাদানটিতে স্থানান্তরিত করুন ।

— ফেলিক্স ক্লিং

Answer 2

আমি অবাক হয়েছি যে উত্তরগুলির কোনওটিরই insertAdjacentHTML()পদ্ধতিটি উল্লেখ করা হয়নি । এটি এখানে দেখুন । প্রথম প্যারামিটারটি যেখানে আপনি স্ট্রিং সংযুক্ত করতে চান এবং এটি গ্রহণ করে ("বিগ্রেইগেন", "আফটারবেগিন", "ফোরেন্ডেন্ড", "আফটারেন্ড")। ওপি'র পরিস্থিতিতে আপনি "পূর্ববর্তী" ব্যবহার করবেন। দ্বিতীয় প্যারামিটারটি কেবল এইচটিএমএল স্ট্রিং।

বেসিক ব্যবহার:

var d1 = document.getElementById('one');
d1.insertAdjacentHTML('beforeend', '<div id="two">two</div>');

Comments

স্বীকৃত পাশাপাশি আপনার সমাধানটি চেষ্টা করে দেখুন। উভয়ই কাজ করে তবে আপনার কেবল 2 টি লাইন এবং কোনও লুপ নেই। আমার বিজয়ী মত শোনাচ্ছে।

— Corwin01

যে কেউ এই পথটি বেছে নিতে পারে তার রেফারেন্সের জন্য: এই পদ্ধতিটি আইই 9-এ টেবিলগুলির সাথে দুর্দান্ত খেলছে না।

— Corwin01

ক্রোমে এটি আমাকে বলে Uncaught TypeError: undefined is not a function!

— J86

এই লুকানো রত্নটির আরও এক্সপোজার দরকার needs

— শেঠ

আপনি যদি এই পদ্ধতিটি কোনও নোড নয়, কেবল FYI- এ ব্যবহার করার চেষ্টা করেন তবে আপনি একটি ত্রুটি পাবেন error

— অ্যালেক্স ডব্লিউ

Answer 3

এই প্রশ্নের জন্য আলনাফির একটি দুর্দান্ত উত্তর রয়েছে। আমি রেফারেন্সের জন্য তার কোডের একটি উদাহরণ দিতে চাই:

var childNumber = 3;

function addChild() {
  var parent = document.getElementById('i-want-more-children');
  var newChild = '<p>Child ' + childNumber + '</p>';
  parent.insertAdjacentHTML('beforeend', newChild);
  childNumber++;
}

body {
  text-align: center;
}
button {
  background: rgba(7, 99, 53, .1);
  border: 3px solid rgba(7, 99, 53, 1);
  border-radius: 5px;
  color: rgba(7, 99, 53, 1);
  cursor: pointer;
  line-height: 40px;
  font-size: 30px;
  outline: none;
  padding: 0 20px;
  transition: all .3s;
}
button:hover {
  background: rgba(7, 99, 53, 1);
  color: rgba(255,255,255,1);
}
p {
  font-size: 20px;
  font-weight: bold;
}

<button type="button" onclick="addChild()">Append Child</button>
<div id="i-want-more-children">
  <p>Child 1</p>
  <p>Child 2</p>
</div>

আশা করি এটি অন্যের পক্ষে সহায়ক।

Comments

আমি বিধিগুলির জন্য অবিচলিত হতে ঘৃণা করি তবে আমি মনে করি আপনি যদি একটি ডেমো তৈরি করেছিলেন (jsfiddle, codepen, ইত্যাদি) এবং তারপরে সম্পাদনা বৈশিষ্ট্যটি ব্যবহার করে বা কোনও মন্তব্য জমা দিয়ে আলনাফির উত্তরে এটি যুক্ত করা ভাল হত। কেবলমাত্র অন্য ব্যবহারকারীর জবাব প্রদর্শনের জন্য একটি উত্তর তৈরি করা আপনার সরবরাহিত তথ্য কতটা কার্যকর তা বিবেচনা না করে এসও কীভাবে কাজ করে তা নয়। ভাবুন যে প্রতিটি ব্যবহারকারী উত্তর তৈরি করে অন্য উত্তর প্রদর্শন করার সিদ্ধান্ত নিয়েছে - এটি অগোছালো হয়ে যাবে।

— মার্টিন জেমস

Answer 4

<div id="Result">
</div>

<script>
for(var i=0; i<=10; i++){
var data = "<b>vijay</b>";
 document.getElementById('Result').innerHTML += data;
}
</script>

"+ =" চিহ্ন সহ ডিভের জন্য ডেটা বরাদ্দ করুন আপনি পূর্ববর্তী এইচটিএমএল ডেটা সহ ডেটা যুক্ত করতে পারেন

Comments

প্রশ্নের বিশেষত ব্যবহার না করা দরকার element.innerHTML += data।

— সংগীত কিছুই

Answer 5

এই কি DocumentFragmentজন্য বোঝানো হয়েছিল।

var frag = document.createDocumentFragment();
var span = document.createElement("span");
span.innerHTML = htmldata;
for (var i = 0, ii = span.childNodes.length; i < ii; i++) {
    frag.appendChild(span.childNodes[i]);
}
element.appendChild(frag);

document.createDocumentFragment, .childNodes

Comments

আমি কেবল এটি পরীক্ষা করেছি এবং এটি কার্যকর হয় না। এটি কীভাবে ব্যবহার করা উচিত?

— বব

আপনি কোথা (a)থেকে পাচ্ছেন ? এটা কি টাইপো?

— অ্যাশ বুর্লাকজেনকো

হ্যাঁ এটি একটি টাইপো, এটি ই হওয়া উচিত। আমি মনে করি না আপনি কোনও খণ্ডের জন্য অভ্যন্তরীণ এইচটিএমএল ব্যবহার করতে পারেন। এটি কাজ করছে না

— বব

@ Bob আমি কপ-আউট ব্যবহারের জন্য jQuery গেছি।

— রায়নস

jQuery না কোন! আমি কেবল একটি ছোট ফাংশনের জন্য jQuery অন্তর্ভুক্ত করব না: \ এটি কেবল মাত্রাতিরিক্ত করা

— বব

Answer 6

কিভাবে মাছ এবং কিভাবে কঠোর কোড ব্যবহার করার সময়। এই পোস্টের নীচে দুটি পূর্বশর্ত প্রয়োজন।

xml_add('before', id_('element_after'), '<span xmlns="http://www.w3.org/1999/xhtml">Some text.</span>');

xml_add('after', id_('element_before'), '<input type="text" xmlns="http://www.w3.org/1999/xhtml" />');

xml_add('inside', id_('element_parent'), '<input type="text" xmlns="http://www.w3.org/1999/xhtml" />');

একাধিক উপাদান যুক্ত করুন (নেমস্পেসটি কেবল প্যারেন্ট এলিমেন্টে থাকা প্রয়োজন):

xml_add('inside', id_('element_parent'), '<div xmlns="http://www.w3.org/1999/xhtml"><input type="text" /><input type="button" /></div>');

গতিশীল পুনরায় ব্যবহারযোগ্য কোড:

function id_(id) {return (document.getElementById(id)) ? document.getElementById(id) : false;}

function xml_add(pos, e, xml)
{
 e = (typeof e == 'string' && id_(e)) ? id_(e) : e;

 if (e.nodeName)
 {
  if (pos=='after') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e.nextSibling);}
  else if (pos=='before') {e.parentNode.insertBefore(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}
  else if (pos=='inside') {e.appendChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true));}
  else if (pos=='replace') {e.parentNode.replaceChild(document.importNode(new DOMParser().parseFromString(xml,'application/xml').childNodes[0],true),e);}
  //Add fragment and have it returned.
 }
}