ডিওমে এইচটিএমএল স্ট্রিং যুক্ত করা হচ্ছে

121

এই এইচটিএমএল স্ট্রিংটি কীভাবে যুক্ত করা যায়

var str = '<p>Just some <span>text</span> here</p>';

ডিওএম-তে আইডিটি 'test'যা ডম-এ রয়েছে?

(বিটিডব্লিউ div.innerHTML += str;গ্রহণযোগ্য নয়।)

— Vidime বিদ্যা
সূত্র

243

insertAdjacentHTMLএটি উপলভ্য থাকলে ব্যবহার করুন , অন্যথায় কিছু প্রকারের ফ্যালব্যাক ব্যবহার করুন। insertAdjacentH HTML সমস্ত বর্তমান ব্রাউজারে সমর্থিত ।

div.insertAdjacentHTML( 'beforeend', str );

লাইভ ডেমো: http://jsfiddle.net/euQ5n/

— নিল
সূত্র

1

@ অ্যালেক্স এটি একই ধারণা: একটি এইচটিএমএল স্ট্রিংকে বিশ্লেষণ করে এটিকে ডিওএমে রাখে। তবে কার্যকারিতাটি আলাদা - innerHTMLউপাদানটিকে স্ট্রিংটি (সমস্ত শিশুদের প্রতিস্থাপনের) মধ্যে insertAdjacentHTMLরাখে , যেখানে এটি উপাদানটির আগে (1), (2) উপাদান পরে, (3) প্রথম সন্তানের আগে উপাদানটির ভিতরে রাখে, বা (4) শেষ সন্তানের পরে উপাদান ভিতরে।

— Vidime Vidas

3

@alex insertAdjacentHTMLদ্রুত করার সংযোজন চেয়ে innerHTML, কারণ insertAdjacentHTMLধারাবাহিকভাবে না এবং উপাদান বিদ্যমান শিশু reparse।

— hsivonen

2

এছাড়াও, insertAdjacentHTMLপরিবর্তিত ফর্ম উপাদানগুলির মানগুলি বজায় রাখে, যেখানে innerHTMLউপাদানটিকে পুনর্নির্মাণের জন্য সংযোজন এবং সমস্ত ফর্মের প্রসঙ্গ হারাবে oses

— ব্র্যান্ডন গাণো

20

এটা কি গ্রহণযোগ্য?

var child = document.createElement('div');
child.innerHTML = str;
child = child.firstChild;
document.getElementById('test').appendChild(child);

jsFizz ।

তবে , নীলের উত্তরই এর চেয়ে ভাল সমাধান।

— Alex
সূত্র

1

@ Šime ডোম এপিআইয়ের সাথে কাজ করা সবসময় হ্যাকের মতো অনুভূত হয়: P আপনি কি স্ট্রিংটি ছাড়াই পছন্দ করতে চান innerHTML?

— অ্যালেক্স

হ্যাঁ, যদি ব্রাউজারের এইচটিএমএল পার্সার ব্যবহারের অন্য কোনও উপায় থাকে তবে আমি তা জানতে আগ্রহী ...

— Vidime Vidas

1

@ Šime - আমি মনে করি ব্রাউজারের এইচটিএমএল পার্সার, অভ্যন্তরীণ এইচটিএমএল এবং ডকুমেন্ট.ওরাইট ব্যবহারের দুটি উপায় আছে। এবং আপনি যদি অন্তর্নিহিত এইচটিএমএল হ্যাক হিসাবে মনে করেন ...

— অলহকি

@Alohci আছে হয় অন্য উপায়: insertAdjacentHTML।

— Vidime Vidas

1

@ Šime-ধন্যবাদ। আমি WHATWG সংস্করণটি পেয়েছি। এটি ডোম পার্সিং এবং সিরিয়ালাইজেশন অনুচ্ছেদে রয়েছে। এটি ইঙ্গিত করে যে পাশাপাশি অভ্যন্তরীণ এইচটিএমএল এবং সন্নিবেশ অ্যাডজাস্টেন্ট এইচটিএমএল এর বহিরাগত এইচটিএমএল আছে এবং আমার ধারণা, createContextualFraament রয়েছে।

— আলোচি

16

কর্মক্ষমতা

AppendChild(ই) ক্রোম এবং সাফারি সম্পর্কিত অন্যান্য সমাধানের তুলনায় 2x এরও বেশি দ্রুত, insertAdjacentHTML(ফ) ফায়ার ফক্সে দ্রুততম। innerHTML=(বি) (সঙ্গে গুলিয়ে ফেলবেন না +=(একটি)) সকল ব্রাউজারে দ্বিতীয় ফাস্ট সমাধান এবং এটি E এবং এফ চেয়ে অনেক বেশী সুবিধাজনক

বিস্তারিত

পরিবেশ স্থাপন করুন (2019.07.10) ক্রোম 75.0.3770 (64-বিট), সাফারি 11.1.0 (13604.5.6), ফায়ারফক্স 67.0.0 (64-বিট) এ ম্যাকওস হাই সিয়েরা 10.13.4

Chrome এ (প্রতি সেকেন্ডে 140k অপারেশন) সবচেয়ে দ্রুত, বি (47 কে) এবং এফ (46 কে) দ্বিতীয়, এ (332) সবচেয়ে ধীর
ফায়ারফক্স এফ (94 কে) দ্রুততম, তারপরে বি (80 কে), ডি (73 কে), ই (64 কে), সি (21 কে) সবচেয়ে ধীরতম এ (466)
সাফারি ইতে (207 কে) দ্রুততম, তারপরে বি (89k), এফ (88 কে), ডি (83 কে), সি (25 কে), সবচেয়ে ধীরতম এ (509)

আপনি এখানে আপনার মেশিনে পরীক্ষা পুনরায় খেলতে পারেন

কোড স্নিপেট দেখান

function A() {    
  container.innerHTML += '<p>A: Just some <span>text</span> here</p>';
}

function B() {    
  container.innerHTML = '<p>B: Just some <span>text</span> here</p>';
}

function C() {    
  $('#container').append('<p>C: Just some <span>text</span> here</p>');
}

function D() {
  var p = document.createElement("p");
  p.innerHTML = 'D: Just some <span>text</span> here';
  container.appendChild(p);
}

function E() {    
  var p = document.createElement("p");
  var s = document.createElement("span"); 
  s.appendChild( document.createTextNode("text ") );
  p.appendChild( document.createTextNode("E: Just some ") );
  p.appendChild( s );
  p.appendChild( document.createTextNode(" here") );
  container.appendChild(p);
}

function F() {    
  container.insertAdjacentHTML('beforeend', '<p>F: Just some <span>text</span> here</p>');
}

A();
B();
C();
D();
E();
F();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

This snippet only for show code used in test (in jsperf.com) - it not perform test itself. 
<div id="container"></div>

স্নিপেট প্রসারিত করুন

— কামিল কিয়েসজেউস্কি
সূত্র

12

innerHTMLকোনও মধ্যস্থতাকারী উপাদানটি ব্যবহার করা এবং তারপরে আপনার শিশু নোডগুলিকে আপনি যেখানে চান সেদিকেই যেতে চান appendChild।

var target = document.getElementById('test');
var str = '<p>Just some <span>text</span> here</p>';

var temp = document.createElement('div');
temp.innerHTML = str;
while (temp.firstChild) {
  target.appendChild(temp.firstChild);
}

এটি কোনও ইভেন্ট হ্যান্ডলারগুলিকে মুছে ফেলা এড়িয়ে যায় div#testতবে তবুও আপনাকে HTML এর স্ট্রিং যুক্ত করতে দেয়।

— ক্রিস কালো
সূত্র

3

সঠিক উপায় ব্যবহার করা হয় insertAdjacentHTML। ফায়ারফক্সে 8 এরও আগে, আপনি Range.createContextualFragmentযদি strকোনও scriptট্যাগ না রাখেন তবে আপনি ফিরে যেতে পারেন ।

যদি আপনার ট্যাগগুলি strথাকে তবে খণ্ডটি সন্নিবেশ করার আগে আপনাকে ফিরে আসা খণ্ড থেকে উপাদানগুলি scriptসরিয়ে ফেলতে হবে । অন্যথায় স্ক্রিপ্টগুলি চলবে। ( স্ক্রিপ্টগুলি অনিবার্য চিহ্নিত করে))scriptcreateContextualFragmentinsertAdjacentHTML

— hsivonen
সূত্র

উল্লেখ করার জন্য আপনাকে ধন্যবাদ createContextualFragment । আমি কোনও এইচটিএমএল তৈরির স্ক্রিপ্টগুলি চালানোর সাথে অন্তর্ভুক্ত করার উপায়টি অনুসন্ধান করছিলাম তবেই যদি ব্যবহারকারী কোনও কুকি সেট করতে রাজি হন।

— schliflo

3

দ্রুত হ্যাক :

<script>
document.children[0].innerHTML="<h1>QUICK_HACK</h1>";
</script>

কেসগুলি ব্যবহার করুন :

1: html ফাইল হিসাবে সংরক্ষণ করুন এবং ক্রোম বা ফায়ারফক্স বা প্রান্তে চালান। (IE অভ্যাস কাজ করবে না)

2: http://js.do এ ব্যবহার করুন

পদক্ষেপে : http://js.do/HeavyMetalCookies/quick_hack

মন্তব্য সহ ভাঙ্গা:

<script>

//: The message "QUICK_HACK" 
//: wrapped in a header #1 tag.
var text = "<h1>QUICK_HACK</h1>";

//: It's a quick hack, so I don't
//: care where it goes on the document,
//: just as long as I can see it.
//: Since I am doing this quick hack in
//: an empty file or scratchpad, 
//: it should be visible.
var child = document.children[0];

//: Set the html content of your child
//: to the message you want to see on screen.
child.innerHTML = text;

</script>

আমি পোস্ট করার কারণ:

জেএস.ডোর দুটি অবশ্যই আবশ্যক রয়েছে:

স্বতঃসিদ্ধ নেই
উল্লম্ব মনিটর বন্ধুত্বপূর্ণ

তবে কনসোল.লগ বার্তা প্রদর্শন করে না। একটি দ্রুত সমাধান খুঁজছেন এখানে এসেছেন। আমি কেবল কয়েক লাইন স্ক্র্যাচপ্যাড কোডের ফলাফল দেখতে চাই, অন্যান্য সমাধানগুলি খুব বেশি কাজ করে।

— জেএমআই মেডিসন
সূত্র

1

কেন তা গ্রহণযোগ্য নয়?

document.getElementById('test').innerHTML += str

এটি করার পাঠ্যপুস্তক হবে

— নিক ব্রান্ট
সূত্র

4

এটি যদিও সংযুক্ত ইভেন্ট হ্যান্ডলারদের হত্যা করবে #test। এটি সাধারণত কাম্য নয়।

— অ্যালেক্স

আকর্ষণীয় যে এটি এটি করে। সত্যিই যৌক্তিক বলে মনে হয় না।

— নিক ব্রান্ট

2

আপনি যদি কোনও স্ট্রিংতে এইচটিএমএলকে সিরিয়ালকরণ এবং তারপরে এইচটিএমএলকে পিছনে সেট করার বিষয়ে চিন্তা করেন তবে এটি যৌক্তিক আমার ধারণা।

— অ্যালেক্স

আমার ধারণা, ইভেন্ট হ্যান্ডলারটি পুনরায় সেট করতে আবার জাভাস্ক্রিপ্ট চালাতে হবে। যথেষ্ট ফর্সা।

— নিক ব্রান্ট

1

@ নিক আপনি DOM এর কোনও অংশকে স্ট্রালিফাইজ (সিরিয়ালাইজ) করতে চান না যাতে আপনি এটি অন্য স্ট্রিং দিয়ে সংমিশ্রিত করতে পারেন এবং তারপরে পুরো বিষয়টিকে আবার ডিওমে বিভক্ত করতে পারেন। অ্যালেক্স যেমন বলেছিল, সিরিয়ালাইজেশন বাউন্ড ইভেন্ট হ্যান্ডলারগুলি (অন্যান্য জিনিসের মধ্যে) রেকর্ড করবে না। এমনকি যদি সে সিরিয়ালাইজেশন সমস্ত কিছু ক্যাপচার করতে পারে তবে আপনি এটি করতে চান না।

— Vidime Vidas

0

এটি সমাধান করতে পারে

 document.getElementById("list-input-email").insertAdjacentHTML('beforeend', '<div class=""><input type="text" name="" value="" class="" /></div>');

— রাফেল সেন
সূত্র

3

স্ট্যাক ওভারফ্লোতে আপনাকে স্বাগতম। দয়া করে কোডের দীর্ঘ একক লাইনটি পেস্ট করার পরিবর্তে কিছু প্রসঙ্গ সরবরাহ করার জন্য উত্তরের অংশ হিসাবে আপনার কোডটি ব্যাখ্যা করুন। যদিও আপনি এটি বুঝতে পেরেছেন এটির কাজগুলি অন্যরা বুঝতে পারে না।

— loan.burger

0

ইনার এইচটিএমএল বিদ্যমান নোডগুলির জন্য ইভেন্টের মতো সমস্ত ডেটা সাফ করে

ফার্স্টচাইল্ড সহ শিশু সংযোজন শুধুমাত্র অন্তর্নিহিত এইচটিএমএলে প্রথম সন্তানের যোগ করে। উদাহরণস্বরূপ যদি আমাদের সংযোজন করতে হয়:

 <p>text1</p><p>text2</p>

কেবল পাঠ্য 1 প্রদর্শিত হবে

এই সম্পর্কে কি:

অভ্যন্তরীণ এইচটিএমএলটিতে অ্যাড চাইল্ড দ্বারা বিশেষ ট্যাগ যুক্ত করুন এবং তারপরে আমরা তৈরি ট্যাগটি মুছে ফেলে বাইরের এইচটিএমএল সম্পাদনা করব। এটি কতটা স্মার্ট তা জানেন না তবে এটি আমার পক্ষে কাজ করে বা আপনি বাইরের এইচটিএমএলকে অভ্যন্তরীণ এইচটিএমএলে পরিবর্তন করতে পারেন যাতে এটি ফাংশন রিপ্লেসটি ব্যবহার না করে

function append(element, str)
{

  var child = document.createElement('someshittyuniquetag');
		
  child.innerHTML = str;

  element.appendChild(child);

  child.outerHTML = child.outerHTML.replace(/<\/?someshittyuniquetag>/, '');

// or Even child.outerHTML = child.innerHTML


  
}

<div id="testit">
This text is inside the div
<button onclick="append(document.getElementById('testit'), '<button>dadasasdas</button>')">To div</button>
<button onclick="append(this, 'some text')">to this</button>
</div>

স্নিপেট প্রসারিত করুন

— Asukasz Szpak
সূত্র

0

সংক্ষিপ্ততম - 18 টি অক্ষর (বিভ্রান্ত নয় +=(ওপি দ্বারা উল্লেখ) এখানে= আরও বিশদ সহ )

test.innerHTML=str

কোড স্নিপেট দেখান

var str = '<p>Just some <span>text</span> here</p>';

test.innerHTML=str

<div id="test"></div>

স্নিপেট প্রসারিত করুন

— কামিল কিয়েসজেউস্কি
সূত্র