जावास्क्रिप्ट - आंतरिक HTML के बिना कंटेनर तत्व के लिए HTML जोड़ें

Question

मुझे आंतरिक HTML का उपयोग किए बिना HTML को कंटेनर तत्व में जोड़ने का एक तरीका चाहिए। आंतरिक HTML का उपयोग न करने का कारण यह है क्योंकि जब यह इस तरह से उपयोग होता है:

element.innerHTML += htmldata

यह पुराने html प्लस और नए html को जोड़ने से पहले सभी html को बदलकर काम करता है। यह अच्छा नहीं है क्योंकि यह डायनामिक मीडिया जैसे एम्बेडेड फ्लैश वीडियो को रीसेट करता है ...

मैं इसे इस तरह से कर सकता था जो काम करता है:

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

हालांकि इस तरह से समस्या यह है कि अब दस्तावेज़ में वह अतिरिक्त स्पैन टैग है जो मुझे नहीं चाहिए।

फिर यह कैसे किया जा सकता है? धन्यवाद!

Comments

क्यों नहीं उपयोग करते हैं Jquery? नीचे मेरे विस्तृत जवाब की जाँच करें। stackoverflow.com/a/50482776/5320562

— लौकान एल्कडी

Answer 1

एक विकल्प देने के लिए (जैसा कि DocumentFragmentकाम नहीं करता है का उपयोग करके ): आप इसे नवनिर्मित नोड के बच्चों पर पुनरावृत्ति करके अनुकरण कर सकते हैं और केवल उन लोगों को जोड़ सकते हैं।

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

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

Comments

मुझे लगा कि हम एक ऐसे समाधान की तलाश कर रहे हैं जो "

— इनर HTML

@kennydelacruz: ओपी एक मौजूदा HTML में नए HTML को जोड़ना नहीं चाहता था क्योंकि यह मौजूदा तत्वों को नष्ट और पुन: बनाता है। ओपी ने एक नया तत्व बनाकर एक समाधान खोजा और कहा कि वे एक अतिरिक्त तत्व जोड़ना नहीं चाहते। मैंने उस समाधान को केवल यह दिखाने के लिए बढ़ाया कि वे नए बनाए गए तत्वों को स्थानांतरित / जोड़ सकते हैं, जो मौजूदा तत्वों को प्रभावित नहीं करते हैं।

— फेलिक्स क्लिंग

मुझे पता है कि यह पुराना है, लेकिन क्या कोई मुझे समझा सकता है कि कोई ई.फर्स्टचाइल्ड पर क्यों कर सकता है?

— टोस्टगेरेट

@Toastgeraet: यह उदाहरण है कि इससे अधिक पुनरावृत्ति नहीं हो रही हैe.firstChild । दरअसल, यह जाँच करता है कि eएक बच्चा है और हाँ अगर, ले जाने के तत्व के लिए खत्म हो कि बच्चे।

— फेलिक्स क्लिंग

Answer 2

मुझे आश्चर्य है कि उत्तर में से किसी ने भी उल्लेख नहीं किया insertAdjacentHTML() विधि का । इसे यहां देखें । पहला पैरामीटर वह है जहाँ आप स्ट्रिंग को जोड़ना चाहते हैं और ("पहले से", "बाद में", "पहले से", "बाद में") लेते हैं। ओपी की स्थिति में आप "पहले" का उपयोग करेंगे। दूसरा पैरामीटर सिर्फ html स्ट्रिंग है।

मूल उपयोग:

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

Comments

बस अपने समाधान के साथ-साथ स्वीकृत की कोशिश की। दोनों काम करता है, लेकिन तुम्हारा केवल 2 लाइनों और कोई छोरों है। मुझे विजेता जैसा महसूस हो रहा है।

— Corwin01

जो भी इस मार्ग को चुन सकता है, उसके संदर्भ में: यह विधि IE9 में तालिकाओं के साथ अच्छा नहीं खेलती है।

— Corwin01

क्रोम में यह मुझे बताता है Uncaught TypeError: undefined is not a function!

— 12

इस छिपे हुए मणि को अधिक एक्सपोजर की जरूरत है।

— सेठ

यदि आप इस पद्धति का उपयोग करने की कोशिश करते हैं तो आपको एक त्रुटि मिलेगी, जो कि एक नोड नहीं है, सिर्फ FYI करें।

— एलेक्स डब्ल्यू

Answer 3

alnafie के पास इस प्रश्न का एक शानदार उत्तर है। मैं संदर्भ के लिए उनके कोड का एक उदाहरण देना चाहता था:

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, कोडपेन, आदि) बना लेते और फिर एडिट फीचर का उपयोग करके या एक टिप्पणी सबमिट करके Alnafie के उत्तर में जोड़ देते। केवल किसी अन्य उपयोगकर्ता के उत्तर को प्रदर्शित करने के लिए एक उत्तर बनाना, एसओ काम नहीं करता है, भले ही आपके द्वारा दी गई जानकारी कितनी उपयोगी हो। कल्पना करें कि यदि प्रत्येक उपयोगकर्ता ने एक उत्तर बनाकर दूसरे उत्तर को प्रदर्शित करने का निर्णय लिया - तो यह गड़बड़ हो जाएगा।

— मार्टिन जेम्स

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>

"+ =" प्रतीक के साथ div के लिए डेटा असाइन करें आप पिछले HTML डेटा सहित डेटा को जोड़ सकते हैं

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)से प्राप्त कर रहे हैं क्या वह टाइपो है।

— ऐश बर्लज़ेंको

हां जो टाइपो है, वह ई होना चाहिए। मुझे नहीं लगता कि आप एक टुकड़े के लिए इनर HTML का उपयोग कर सकते हैं। यह काम नहीं कर रहा है

— बॉब

@ मेरे पास पुलिस के उपयोग के लिए jQuery है।

— रेयनोस

jQuery नहीं नहीं! मैं सिर्फ एक छोटे से कार्य के लिए jQuery को शामिल नहीं करने जा रहा हूं: यह सिर्फ ओवरकिल है

— Bob

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