डोम में HTML स्ट्रिंग लागू करना

Question

इस HTML स्ट्रिंग को कैसे जोड़ें

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

DIV के साथ ID 'test'जो DOM में है?

(Btw div.innerHTML += str;स्वीकार्य नहीं है।)

Answer 1

insertAdjacentHTMLयदि यह उपलब्ध हो तो उपयोग करें , अन्यथा किसी प्रकार की गिरावट का उपयोग करें। InsertAdjacentHTML सभी वर्तमान ब्राउज़रों में समर्थित है ।

div.insertAdjacentHTML( 'beforeend', str );

लाइव डेमो: http://jsfiddle.net/euQ5n/

Comments

@alex यह एक ही अवधारणा है: HTML स्ट्रिंग को पार्स करना और इसे DOM में डालना। लेकिन कार्यक्षमता अलग है - innerHTMLस्ट्रिंग को तत्व में डाल दिया जाता है (सभी बच्चों को प्रतिस्थापित करते हुए), जबकि insertAdjacentHTMLइसे (1) तत्व से पहले, (2) तत्व के बाद, (3) तत्व के अंदर पहले बच्चे, या (4) से पहले रखा जाता है। पिछले बच्चे के बाद तत्व के अंदर।

— 14इम विद सिप 6'11

@alex insertAdjacentHTML, के लिए अपील करने की तुलना में तेज़ है innerHTML, क्योंकि insertAdjacentHTMLतत्व के मौजूदा बच्चों को क्रमबद्ध और प्रतिष्ठित नहीं करता है।

— hsivonen

इसके अलावा, insertAdjacentHTMLपरिवर्तित रूप तत्वों के मूल्यों को बनाए रखता है, जबकि innerHTMLतत्व का पुनर्निर्माण करता है और सभी प्रपत्र संदर्भ खो देता है।

— ब्रैंडन गानो

Answer 2

क्या यह स्वीकार्य है?

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

jsFiddle ।

लेकिन , नील का जवाब एक बेहतर उपाय है।

Comments

@ A समय के साथ काम करना एपीआई एपीआई हमेशा एक हैक की तरह लगता है: पी क्या आप बिना स्ट्रिंग को अनसब्सक्राइब करना पसंद करेंगे innerHTML?

— एलेक्स

हां, अगर ब्राउज़र के HTML पार्सर का उपयोग करने का एक और तरीका है, तो मुझे यह जानना अच्छा

— लगेगा

@ Utilizeime - मुझे लगता है कि ब्राउज़र के HTML पार्सर, इनर HTML और डॉक्यूमेंट को लिखने के केवल दो ही तरीके हैं। और अगर आपको लगता है कि भीतर

— HTML

@Alohci एक और तरीका है insertAdjacentHTML:।

— इम विद सिप

@ Tटाइम-थैंक्स। मुझे WHATWG संस्करण मिला। यह DOM Parsing और Serialization कल्पना में है। यह इंगित करता है कि इनरएचटीएमएल और इन्सट्रीजेंट एचटीएमएल, एक्सटर्नल एचटीएमएल है और, मुझे लगता है, क्रिएक्नेक्चुअल फ़्रेग्मेंटेशन।

— Alohci

Answer 3

प्रदर्शन

AppendChild(ई) क्रोम और सफारी पर अन्य समाधानों की तुलना में 2x से अधिक तेज है, insertAdjacentHTML(एफ) फ़ायरफ़ॉक्स पर सबसे तेज़ है। innerHTML=(बी) (साथ भ्रमित न करें +=(ए)) सभी ब्राउज़रों पर दूसरा तेजी से समाधान है और यह ई और एफ की तुलना में अधिक उपयोगी है

विवरण

Chrome 75.0.3770 (64-बिट), सफारी 11.1.0 (13604.5.6), फ़ायरफ़ॉक्स 67.0.0 (64-बिट) पर पर्यावरण (2019.07.10) मैको हाई सिएरा 10.13.4 सेट करें।

• Chrome E पर (140k संचालन प्रति सेकंड) सबसे तेज़ है, B (47k) और F (46k) दूसरे हैं, A (332) सबसे धीमा है
• फ़ायरफ़ॉक्स F (94k) पर सबसे तेज़ है, तो B (80k), D (73k), E (64k), C (21k) सबसे धीमा A (466) है
• सफारी ई पर (207k) सबसे तेज़ है, फिर B (89k), F (88k), D (83k), C (25k), सबसे धीमा A (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>

Answer 4

विचार 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 के एक स्ट्रिंग को जोड़ने की अनुमति देता है।

Answer 5

सही तरीका उपयोग कर रहा है insertAdjacentHTML। फ़ायरफ़ॉक्स में पहले की तुलना में 8, आप उपयोग करने के लिए वापस गिर सकते हैं Range.createContextualFragmentयदि आपके strकोई scriptटैग नहीं है ।

यदि आपके टैग strशामिल हैं script, तो आपको scriptटुकड़ा createContextualFragmentडालने से पहले लौटे हुए टुकड़े से तत्वों को निकालना होगा । अन्यथा, स्क्रिप्ट चलेंगे। ( insertAdjacentHTMLलिपियों को अप्राप्य बनाता है।)

Comments

उल्लेख करने के लिए धन्यवाद createContextualFragment । मैं कुछ html बनाने के तरीके की खोज कर रहा था, जिसमें स्क्रिप्ट तभी चलती हैं जब उपयोगकर्ता कुकी सेट करने के लिए सहमत होता है।

— schliflo

Answer 6

त्वरित हैक :

---

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

कारण मैंने पोस्ट किया:

JS.do में दो हव्वा होने चाहिए:

1. कोई स्वतः पूर्ण नहीं
2. वर्टिकल मॉनिटर फ्रेंडली

लेकिन कंसोल.लॉग संदेश नहीं दिखाता है। यहाँ जल्दी समाधान की तलाश में आया था। मैं सिर्फ स्क्रैडपैड कोड की कुछ लाइनों के परिणाम देखना चाहता हूं, अन्य समाधान बहुत अधिक काम कर रहे हैं।

Answer 7

वह क्यों स्वीकार्य नहीं है?

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

यह करने का पाठ्यपुस्तक तरीका होगा।

Comments

यह हालांकि घटना से जुड़े हैंडलर को मार देगा #test। यह आमतौर पर वांछनीय नहीं है।

— 22

दिलचस्प है कि यह ऐसा करता है। वास्तव में तर्कसंगत नहीं लगता।

— निक ब्रंट

यदि आप HTML को एक स्ट्रिंग में क्रमबद्ध करने और फिर HTML को सेट करने के बारे में सोचते हैं तो यह तर्कसंगत है।

— एलेक्स

मुझे लगता है कि ईवेंट हैंडलर को रीसेट करने के लिए जावास्क्रिप्ट को फिर से चलाना होगा। काफी उचित।

— निक ब्रंट

@ नहीं आप DOM के एक हिस्से को स्ट्रिंग (क्रमबद्ध) करना नहीं चाहते हैं ताकि आप इसे किसी अन्य स्ट्रिंग के साथ संक्षिप्त कर सकें और फिर संपूर्ण चीज़ को DOM में वापस पार्स कर सकें। जैसा कि एलेक्स ने कहा, क्रमबद्धता बाउंड इवेंट हैंडलर (अन्य चीजों के बीच) को रिकॉर्ड नहीं करेगी। यहां तक ​​कि अगर वह क्रमांकन सब कुछ पर कब्जा कर सकता है, तो भी आप ऐसा नहीं करना चाहेंगे।

— 23इमे विद

Answer 8

यह हल कर सकते हैं

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

Comments

ढेर अतिप्रवाह में आपका स्वागत है। कृपया कोड के एक लंबी एकल पंक्ति को चिपकाने के बजाय कुछ संदर्भ प्रदान करने के लिए उत्तर के भाग के रूप में अपने कोड को समझाएं। यद्यपि आप इसे समझते हैं कि दूसरे यह नहीं समझ सकते हैं कि इसका क्या किया जा रहा है।

— लोन.बर्गर

Answer 9

भीतरी HTML मौजूदा नोड्स के लिए ईवेंट जैसे सभी डेटा को साफ़ करता है

फर्स्ट चाइल्ड के साथ बच्चे को जोड़ें केवल आंतरिक HTML में पहला बच्चा जोड़ता है। उदाहरण के लिए अगर हमें संलग्न करना है:

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

केवल text1 दिखाई देगा

इस बारे में क्या:

बच्चे को जोड़ें द्वारा आंतरिक HTML में विशेष टैग जोड़ता है और फिर हमारे द्वारा बनाए गए टैग को हटाकर बाहरी HTML संपादित करें। यह नहीं जानते कि यह कितना स्मार्ट है, लेकिन यह मेरे लिए काम करता है या आप बाहरी HTML को आंतरिक HTML में बदल सकते हैं, इसलिए इसे फ़ंक्शन रिप्लेसमेंट का उपयोग करने की आवश्यकता नहीं है

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>

Answer 10

सबसे छोटा - 18 वर्ण (भ्रमित न होना +=(ओपी द्वारा उल्लेख) यहां= अधिक विवरण के साथ )

test.innerHTML=str

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

test.innerHTML=str

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