अंतर्निहित स्ट्रिंग विधियों या प्रोटोटाइप का उपयोग करके HTML स्ट्रिंग से एक नया DOM तत्व बनाना

Question

मेरे पास एक तत्व का प्रतिनिधित्व करने वाला एक HTML स्ट्रिंग है '<li>text</li>':। मैं इसे DOM ( ulमेरे मामले में) में एक तत्व के साथ जोड़ना चाहूंगा । मैं इसे प्रोटोटाइप या DOM तरीकों से कैसे कर सकता हूं?

(मुझे पता है कि मैं इसे आसानी से jQuery में कर सकता हूं, लेकिन दुर्भाग्य से हम jQuery का उपयोग नहीं कर रहे हैं।)

Comments

क्षमा करें, आप वास्तव में क्या पूरा करने की कोशिश कर रहे हैं? HTML स्ट्रिंग -> प्रमुख तत्व?

— क्रिसेंट फ्रेश

यह दुर्भाग्यपूर्ण है कि ये समाधान इतने अप्रत्यक्ष हैं। मैं चाहता हूं कि मानक समिति कुछ इसी तरह का उल्लेख करेगी:var nodes = document.fromString("<b>Hello</b> <br>");

— श्रीधर सरनोबत

MDN: "HTML_to_DOM"

— vsync

मुझे ऊपर के साथ एक समस्या थी, क्योंकि मेरे पास ऐसी विशेषताएँ थीं जिन्हें साथ पास करने की आवश्यकता थी और मुझे उन्हें पार्स करने का मन नहीं था: "<table id = '5ccf9305-4b10-aec6-3c55-a6d218bbb107' class = 'data-table रो-बॉर्डर डिस्प्ले 'सेलस्पेसिंग =' 0 'चौड़ाई =' 100% '> </ टेबल> "तो, मैंने बस इस्तेमाल किया: $ (" <टेबल आईडी =' 5ccf9305-4b10-aec6-3c55-a680218bfb107 'क्लास =' डेटा -योग्य पंक्ति-बॉर्डर डिस्प्ले 'सेलस्पेसिंग =' 0 'चौड़ाई =' 100% '> </ टेबल> ")

— स्टीवनस्लेसर

Answer 1

नोट: अधिकांश वर्तमान ब्राउज़र HTML <template>तत्वों का समर्थन करते हैं, जो स्ट्रिंग्स से तत्वों को बनाने का एक और अधिक विश्वसनीय तरीका प्रदान करते हैं। देखें विवरण के लिए नीचे मार्क Amery का जवाब ।

पुराने ब्राउज़रों और नोड / jsdom के लिए : (जो <template>लेखन के समय तत्वों का समर्थन नहीं करता है ), निम्नलिखित विधि का उपयोग करें। यह एक ही बात है कि एक HTML स्ट्रिंग से डोम तत्व प्राप्त करने के लिए पुस्तकालयों का उपयोग करने के लिए है ( इसके कार्यान्वयन के साथ बग के आसपास काम करने के लिए IE के लिए कुछ अतिरिक्त काम के साथ innerHTML):

function createElementFromHTML(htmlString) {
  var div = document.createElement('div');
  div.innerHTML = htmlString.trim();

  // Change this to div.childNodes to support multiple top-level nodes
  return div.firstChild; 
}

ध्यान दें कि HTML टेम्प्लेट के विपरीत यह उन कुछ तत्वों के लिए काम नहीं करेगा जो कानूनी रूप से किसी के बच्चे नहीं हो सकते हैं <div>, जैसे कि <td>एस।

यदि आप पहले से ही लाइब्रेरी का उपयोग कर रहे हैं, तो मैं आपको HTML स्ट्रिंग्स से तत्व बनाने की लाइब्रेरी-स्वीकृत पद्धति से चिपके रहने की सलाह दूंगा:

• प्रोटोटाइप में यह फीचर बिल्ट-इन है update() विधि ।
• jQuery ने इसे अपने jQuery(html)और jQuery.parseHTMLतरीकों में लागू किया है ।

Comments

इस असुरक्षित आंतरिक एचटीएमएल असाइनमेंट (div.innerHTML = "कुछ मान" का उपयोग किए बिना jQuery का उपयोग करके बनाए गए div में आंतरिक HTML को कैसे सेट करें

— शिवान्शु गोयल

फ़ंक्शन का नाम createElementFromHTML भ्रामक है क्योंकि div.firstChildरिटर्न एक है Nodeजो एक HTMLElementउदाहरण के लिए नहीं है node.setAttribute। इसके बजाय फ़ंक्शन से Elementवापसी बनाने के लिए div.firstElementChild।

— सेमेल

धन्यवाद, <div>मेरे द्वारा जोड़े गए HTML को लपेटना .innerHTMLमुझे परेशान कर रहा था। मैंने कभी इस्तेमाल करने के बारे में नहीं सोचा .firstChild।

— इवान

मैं निर्मित divऔर अंदर आउटपुट SVG को पार्स करने की कोशिश कर रहा हूं , [object SVGSVGElement]जबकि कंसोल लॉग मुझे सही DOM तत्व देता है। मैं क्या गलत कर रहा हूं?

— ed1nh0

मैं FirstChild के बजाय FirstElementChild का उपयोग करूंगा (देखें w3schools.com/jsref/prop_element_firstelementchild.asp ), क्योंकि यदि टेम्पलेट के सामने या अंत में जगह है, तो पहलाChild खाली पाठ वापस करेगा

— क्रिस Panayotoff

Answer 2

एचटीएमएल 5 ने <template>इस उद्देश्य के लिए उपयोग किया जाने वाला तत्व प्रस्तुत किया (जैसा कि अब व्हाट्सएप कल्पना और एमडीएन डॉक्स में वर्णित है )।

<template>एचटीएमएल के टुकड़े घोषित करने के लिए एक तत्व का उपयोग किया जाता है जो स्क्रिप्ट में उपयोग किया जा सकता है। तत्व को DOM के रूप में दर्शाया गया हैHTMLTemplateElement जिसके पास टेम्पलेट की सामग्री तक पहुंच प्रदान करने के लिए, प्रकार की .contentसंपत्ति है DocumentFragment। इसका मतलब यह है कि आप innerHTMLएक <template>तत्व की स्थापना करके एक HTML स्ट्रिंग को DOM तत्वों में परिवर्तित कर सकते हैं , फिर template's' में पहुंच सकते हैं.content संपत्ति हैं।

उदाहरण:

/**
 * @param {String} HTML representing a single element
 * @return {Element}
 */
function htmlToElement(html) {
    var template = document.createElement('template');
    html = html.trim(); // Never return a text node of whitespace as the result
    template.innerHTML = html;
    return template.content.firstChild;
}

var td = htmlToElement('<td>foo</td>'),
    div = htmlToElement('<div><span>nested</span> <span>stuff</span></div>');

/**
 * @param {String} HTML representing any number of sibling elements
 * @return {NodeList} 
 */
function htmlToElements(html) {
    var template = document.createElement('template');
    template.innerHTML = html;
    return template.content.childNodes;
}

var rows = htmlToElements('<tr><td>foo</td></tr><tr><td>bar</td></tr>');

ध्यान दें कि समान दृष्टिकोण जो एक अलग कंटेनर तत्व का उपयोग करते हैं जैसे किdiv काफी काम नहीं करते हैं। HTML में इस बात पर प्रतिबंध है कि किस तत्व प्रकार को अन्य तत्व प्रकारों के अंदर मौजूद होने की अनुमति है; उदाहरण के लिए, आप tdएक के प्रत्यक्ष बच्चे के रूप में नहीं डाल सकते हैं div। यह इन तत्वों को गायब करने का कारण बनता है यदि आप उन्हें शामिल करने के लिए सेट करने innerHTMLका प्रयास करते divहैं। जबसे<template> उनकी सामग्री पर ऐसा कोई प्रतिबंध नहीं है, इसलिए टेम्पलेट का उपयोग करते समय यह कमी लागू नहीं होती है।

तथापि, template कुछ पुराने ब्राउज़रों में समर्थित नहीं है। जनवरी 2018 तक, क्या मैं उपयोग कर सकता हूं ... अनुमान है कि दुनिया भर में 90% उपयोगकर्ता एक ब्राउज़र का उपयोग कर रहे हैं जो templateएस का समर्थन करता है । विशेष रूप से, इंटरनेट एक्सप्लोरर का कोई भी संस्करण उनका समर्थन नहीं करता है; Microsoft ने templateएज की रिलीज़ तक समर्थन को लागू नहीं किया ।

यदि आप पर्याप्त भाग्यशाली हैं कि वह कोड लिख रहा है जो केवल आधुनिक ब्राउज़रों के उपयोगकर्ताओं पर लक्षित है, तो आगे बढ़ें और अभी उनका उपयोग करें। अन्यथा, उपयोगकर्ताओं को पकड़ने के लिए आपको कुछ समय इंतजार करना पड़ सकता है।

Comments

अच्छा एक, आधुनिक दृष्टिकोण। ओपेरा पर परीक्षण किया गया है, आइए भूल जाते हैं IE

— आदि प्रिसिएटो

यह एक प्रभावी दृष्टिकोण और बहुत साफ है; हालाँकि, (कम से कम Chrome 50 में) यह स्क्रिप्ट टैग हैंडलिंग को तोड़ देता है। दूसरे शब्दों में, स्क्रिप्ट टैग बनाने के लिए इस पद्धति का उपयोग करना और फिर इसे दस्तावेज़ (निकाय या प्रमुख) में शामिल करने से टैग का मूल्यांकन नहीं किया जाता है और इसलिए स्क्रिप्ट को निष्पादित होने से रोकता है। (यह डिजाइन द्वारा हो सकता है अगर मूल्यांकन संलग्न पर होता है; मैं निश्चित रूप से नहीं कह सकता।)

— शान्फेन

लवली! आप कुछ ऐसा करके तत्वों की क्वेरी भी कर सकते हैं: template.content.querySelector ("img");

— रोजर गजराज

@ ताजा ताजा: पर्याप्त, मैं इस धारणा का था कि आप अपना जवाब चाहते थे क्योंकि आपने कहा था कि यह अब अप्रासंगिक है, मेरी माफी। एक अच्छा समझौता पाठकों को इस ओर इशारा करते हुए आपके उत्तर में एक बयान जोड़ देगा, जैसा कि अब मेटा पर चर्चा की गई है - चलो बस उम्मीद करते हैं कि संपादित युद्ध वहां से वापस नहीं उठा।

— BoltClock

इसके साथ एक समस्या है। यदि आपके पास प्रारंभ या अंत में रिक्त स्थान के साथ अंदर टैग है, तो उन्हें हटा दिया जाएगा! मुझे गलत मत समझो, यह रिक्त स्थान के बारे में नहीं है html.trimबल्कि आंतरिक HTML सेटिंग के आंतरिक पार्सिंग द्वारा है। मेरे मामले में यह एक textNode का हिस्सा होने वाले महत्वपूर्ण स्थानों को हटा देता है। :-(

— ई-प्रेरक

Answer 3

InsertAdjacentHTML () का उपयोग करें । यह IE11 के साथ सभी वर्तमान ब्राउज़रों के साथ काम करता है।

var mylist = document.getElementById('mylist');
mylist.insertAdjacentHTML('beforeend', '<li>third</li>');

<ul id="mylist">
 <li>first</li>
 <li>second</li>
</ul>

Comments

सबसे पहले, insertAdjacentHTMLIE 4.0 के बाद से सभी ब्राउज़रों के साथ काम करता है।

— जोनास Jonppelgran

दूसरा, यह बहुत अच्छा है! तुलना में एक बड़ा प्लस यह innerHTML += ...है कि पिछले तत्वों का संदर्भ अभी भी इस पद्धति का उपयोग करके बरकरार है।

— जोनास Jonppelgran

पहला तर्क के लिए तीसरा, संभावित मान है: beforebegin, afterbegin, beforeend, afterend। एमडीएन लेख देखें।

— जोनास Jonppelgran

मेरे लिए सबसे अच्छा जवाब

— जॉर्डन

बहुत बुरा यह एक तत्व के रूप में सम्मिलित HTML वापस नहीं करता है

— Mojimi

Answer 4

नए डोम कार्यान्वयन हैं range.createContextualFragment , जो वह करता है जो आप एक स्वतंत्र तरीके से चाहते हैं।

यह व्यापक रूप से समर्थित है। हालांकि, यह सुनिश्चित करने के लिए कि एमडीएन लिंक में इसकी संगतता नीचे की जाँच करें, क्योंकि यह बदल रहा होगा। मई 2017 तक यह है:

Feature         Chrome   Edge   Firefox(Gecko)  Internet Explorer   Opera   Safari
Basic support   (Yes)    (Yes)  (Yes)           11                  15.0    9.1.2

Comments

ध्यान दें कि यह innerHTMLएक div की स्थापना करने के लिए समान कमियां हैं ; कुछ तत्वों, जैसे tds, को नजरअंदाज किया जाएगा और परिणामी टुकड़े में नहीं दिखाई देगा।

— मार्क एमी

"ऐसी ख़बरें हैं कि डेस्कटॉप सफ़ारी ने एक बिंदु सपोर्ट Range.createContextualFragment () पर किया, लेकिन यह कम से कम सफारी 9.0 और 9.1 में समर्थित नहीं है।" (जवाब में

— एमडीएन

Answer 5

किसी ट्वीक की जरूरत नहीं, आपको एक देशी एपीआई मिला:

const toNodes = html =>
    new DOMParser().parseFromString(html, 'text/html').body.childNodes[0]

Comments

यह स्वीकृत उत्तर के रूप में एक ही बड़ी खामी से ग्रस्त है - यह HTML को पसंद करेगा <td>text</td>। ऐसा इसलिए है क्योंकि DOMParserएक पूर्ण HTML दस्तावेज़ को पार्स करने की कोशिश की जा रही है , और सभी तत्व दस्तावेज़ के मूल तत्वों के रूप में मान्य नहीं हैं।

— मार्क अमेरी

-1 क्योंकि यह पहले वाले उत्तर का एक डुप्लिकेट है जो स्पष्ट रूप से मेरी टिप्पणी में उल्लिखित खामी को स्पष्ट करता है।

— मार्क अमेरी

Answer 6

कुछ HTML अंशों के लिए <td>test</td>, जैसे div.innerHTML, DOMParser.parseFromString और range.createContextualFragment (सही संदर्भ के बिना) यहाँ अन्य उत्तरों में वर्णित समाधान, <td>तत्व नहीं बनाएंगे ।

jQuery.parseHTML () उन्हें ठीक से हैंडल करता है (मैंने एक स्वतंत्र फ़ंक्शन में jQuery 2 के parseHTML फ़ंक्शन को निकाला है जो गैर-jquery कोडबेस में उपयोग किया जा सकता है)।

यदि आप केवल एज 13+ का समर्थन कर रहे हैं, तो एचटीएमएल 5 टेम्पलेट टैग का उपयोग करना सरल है:

function parseHTML(html) {
    var t = document.createElement('template');
    t.innerHTML = html;
    return t.content.cloneNode(true);
}

var documentFragment = parseHTML('<td>Test</td>');

Answer 7

इसका एक आसान तरीका है:

String.prototype.toDOM=function(){
  var d=document
     ,i
     ,a=d.createElement("div")
     ,b=d.createDocumentFragment();
  a.innerHTML=this;
  while(i=a.firstChild)b.appendChild(i);
  return b;
};

var foo="<img src='//placekitten.com/100/100'>foo<i>bar</i>".toDOM();
document.body.appendChild(foo);

Comments

@MarkAmery यहाँ अंतर यह है कि वह DOM में कई रूट एलिमेंट को जोड़ने की अनुमति देने के लिए एक खंड का उपयोग करता है, जो कि एक अतिरिक्त लाभ है। यदि केवल विलियम ने उल्लेख किया कि उसका उत्तर है ...

— कोएन।

Answer 8

आप एक स्ट्रिंग से मान्य DOM नोड बना सकते हैं:

document.createRange().createContextualFragment()

निम्न उदाहरण पृष्ठ में एक स्ट्रिंग से मार्कअप लेते हुए एक बटन तत्व जोड़ता है:

let html = '<button type="button">Click Me!</button>';
let fragmentFromString = function (strHTML) {
  return document.createRange().createContextualFragment(strHTML);
}
let fragment = fragmentFromString(html);
document.body.appendChild(fragment);

Comments

हालांकि यह एक DocumentFragmentवस्तु बनाता है , यह अभी भी - मेरे महान आश्चर्य के लिए - स्वीकृत उत्तर के समान दोष से ग्रस्त है: यदि आप करते हैं document.createRange().createContextualFragment('<td>bla</td>'), तो आपको एक टुकड़ा मिलता है जिसमें केवल <td>तत्व के बिना पाठ 'bla' होता है। या कम से कम, यही मैं क्रोम 63 में देखता हूं; मैंने यह पता लगाने में कल्पना नहीं की है कि यह सही व्यवहार है या नहीं।

— मार्क अमेरी

Answer 9

प्रोटोटाइप के साथ, आप यह भी कर सकते हैं:

HTML:

<ul id="mylist"></ul>

जे एस:

$('mylist').insert('<li>text</li>');

Comments

क्या यह jQuery है? या जेएस?

— जेया सूरिया मुथुमारी

यह jQuery का उपयोग नहीं कर रहा है निर्मित में डोम तरीकों का उल्लेख के रूप में उल्लेख किया है।

— जुआन हर्टाडो

@JuanHurtado यह प्रोटोटाइप का उपयोग कर रहा है क्योंकि लगभग 11 साल पहले ओपी ने अनुरोध किया था;)

— पाब्लो बोरोविज़

Answer 10

मैं इस विधि का उपयोग कर रहा हूं (IE9 + में काम करता है), हालांकि यह पार्स <td>या शरीर के कुछ अन्य अवैध प्रत्यक्ष चिल्ड नहीं करेगा :

function stringToEl(string) {
    var parser = new DOMParser(),
        content = 'text/html',
        DOM = parser.parseFromString(string, content);

    // return element
    return DOM.body.childNodes[0];
}

stringToEl('<li>text</li>'); //OUTPUT: <li>text</li>

Answer 11

इसके अलावा उपयोगी .toDOM () स्निपेट को बढ़ाने के लिए जिसे हम विभिन्न स्थानों में पा सकते हैं, अब हम सुरक्षित रूप से बैकटिक्स ( टेम्पलेट शाब्दिक) का उपयोग कर सकते हैं ) का ।

तो हम फू में सिंगल और डबल कोट्स हो सकते हैं html घोषणा ।

यह वंशानुगत की तरह व्यवहार करता है शब्द से परिचित लोगों के लिए करता है।

यह जटिल टेम्प्लेट बनाने के लिए चर के साथ और बढ़ाया जा सकता है:

टेम्प्लेट शाब्दिक डबल या सिंगल कोट्स के बजाय बैक-टिक ( ) (गंभीर उच्चारण) वर्ण द्वारा संलग्न हैं । टेम्पलेट शाब्दिकों में प्लेसहोल्डर हो सकते हैं। ये डॉलर के संकेत और घुंघराले ब्रेसिज़ ($ {अभिव्यक्ति}) द्वारा दर्शाए गए हैं। प्लेसहोल्डर्स में अभिव्यक्तियाँ और उनके बीच का पाठ एक फंक्शन में पास हो जाता है। डिफ़ॉल्ट फ़ंक्शन सिर्फ भागों को एक स्ट्रिंग में समेटता है। यदि टेम्पलेट शाब्दिक (यहाँ टैग) से पहले एक अभिव्यक्ति है, तो इसे "टैग्ड टेम्पलेट" कहा जाता है। उस स्थिति में, टैग अभिव्यक्ति (आमतौर पर एक फ़ंक्शन) को संसाधित टेम्पलेट शाब्दिक के साथ बुलाया जाता है, जिसे आप आउटपुट करने से पहले हेरफेर कर सकते हैं। टेम्पलेट शाब्दिक में बैक-टिक से बचने के लिए, बैक-टिक से पहले एक बैकस्लैश \ _ डालें।

String.prototype.toDOM=function(){
  var d=document,i
     ,a=d.createElement("div")
     ,b=d.createDocumentFragment()
  a.innerHTML = this
  while(i=a.firstChild)b.appendChild(i)
  return b
}

// Using template litterals
var a = 10, b = 5
var foo=`
<img 
  onclick="alert('The future start today!')"   
  src='//placekitten.com/100/100'>
foo${a + b}
  <i>bar</i>
    <hr>`.toDOM();
document.body.appendChild(foo);

img {cursor: crosshair}

तो, सीधे उपयोग क्यों न करें .innerHTML += ? ऐसा करने पर, पूरे DOM को ब्राउज़र द्वारा पुनर्गणना किया जा रहा है, यह बहुत धीमा है।

https://caniuse.com/template-literals

Answer 12

मैंने एक Documentप्रोटोटाइप जोड़ा जो स्ट्रिंग से एक तत्व बनाता है:

Document.prototype.createElementFromString = function (str) {
    const element = new DOMParser().parseFromString(str, 'text/html');
    const child = element.documentElement.querySelector('body').firstChild;
    return child;
};

Comments

ध्यान दें - जैसा कि इस पृष्ठ पर कहीं और बताया गया है - यह काम नहीं करेगा td।

— मार्क अमेरी

Answer 13

एचटीएमएल 5 और ईएस 6

<template>

डेमो

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 * @description HTML5 Template
 * @augments
 * @example
 *
 */

/*

<template>
    <h2>Flower</h2>
    <img src="https://www.w3schools.com/tags/img_white_flower.jpg">
</template>


<template>
    <div class="myClass">I like: </div>
</template>

*/

const showContent = () => {
    // let temp = document.getElementsByTagName("template")[0],
    let temp = document.querySelector(`[data-tempalte="tempalte-img"]`),
        clone = temp.content.cloneNode(true);
    document.body.appendChild(clone);
};

const templateGenerator = (datas = [], debug = false) => {
    let result = ``;
    // let temp = document.getElementsByTagName("template")[1],
    let temp = document.querySelector(`[data-tempalte="tempalte-links"]`),
        item = temp.content.querySelector("div");
    for (let i = 0; i < datas.length; i++) {
        let a = document.importNode(item, true);
        a.textContent += datas[i];
        document.body.appendChild(a);
    }
    return result;
};

const arr = ["Audi", "BMW", "Ford", "Honda", "Jaguar", "Nissan"];

if (document.createElement("template").content) {
    console.log("YES! The browser supports the template element");
    templateGenerator(arr);
    setTimeout(() => {
        showContent();
    }, 0);
} else {
    console.error("No! The browser does not support the template element");
}

@charset "UTf-8";

/* test.css */

:root {
    --cololr: #000;
    --default-cololr: #fff;
    --new-cololr: #0f0;
}

[data-class="links"] {
    color: white;
    background-color: DodgerBlue;
    padding: 20px;
    text-align: center;
    margin: 10px;
}

<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Template Test</title>
    <!--[if lt IE 9]>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
</head>

<body>
    <section>
        <h1>Template Test</h1>
    </section>
    <template data-tempalte="tempalte-img">
        <h3>Flower Image</h3>
        <img src="https://www.w3schools.com/tags/img_white_flower.jpg">
    </template>
    <template data-tempalte="tempalte-links">
        <h3>links</h3>
        <div data-class="links">I like: </div>
    </template>
    <!-- js -->
</body>

</html>

Answer 14

देर से लेकिन सिर्फ एक नोट के रूप में;

कंटेनर के रूप में तत्व को लक्षित करने के लिए एक तुच्छ तत्व जोड़ना संभव है और उपयोग करने के बाद इसे हटा दें।

// क्रोम 23.0, फायरफॉक्स 18.0, यानी 7-8-9 और ओपेरा 12.11 पर परीक्षण किया गया।

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

<script>
window.onload = function() {
    var foo, targetElement = document.getElementById('div')
    foo = document.createElement('foo')
    foo.innerHTML = '<a href="#" target="_self">Text of A 1.</a> '+
                    '<a href="#" onclick="return !!alert(this.innerHTML)">Text of <b>A 2</b>.</a> '+
                    '<hr size="1" />'
    // Append 'foo' element to target element
    targetElement.appendChild(foo)

    // Add event
    foo.firstChild.onclick = function() { return !!alert(this.target) }

    while (foo.firstChild) {
        // Also removes child nodes from 'foo'
        targetElement.insertBefore(foo.firstChild, foo)
    }
    // Remove 'foo' element from target element
    targetElement.removeChild(foo)
}
</script>

Answer 15

सबसे आसान समाधान स्ट्रिंग से DOM रेंडर करने के लिए:

let render = (relEl, tpl, parse = true) => {
  if (!relEl) return;
  const range = document.createRange();
  range.selectNode(relEl);
  const child = range.createContextualFragment(tpl);
  return parse ? relEl.appendChild(child) : {relEl, el};
};

और यहाँ आप DOM मैनिप्युलेशन रिएक्ट बनाम देशी JS के प्रदर्शन को देख सकते हैं

अब आप बस उपयोग कर सकते हैं:

let element = render(document.body, `
<div style="font-size:120%;line-height:140%">
  <p class="bold">New DOM</p>
</div>
`);

और निश्चित रूप से निकट भविष्य में यू यूज़ संदर्भों से मेमोरी कारण var "तत्व" आपके दस्तावेज़ में नया बनाया गया DOM है।

और याद रखें "innerHTML =" बहुत धीमा है: /

Answer 16

यहाँ मेरा कोड है, और यह काम करता है:

function parseTableHtml(s) { // s is string
    var div = document.createElement('table');
    div.innerHTML = s;

    var tr = div.getElementsByTagName('tr');
    // ...
}

Comments

विफल रहता है अगर बनाया जाने वाला तत्व अपने आप में एक तालिका है।

— मार्क ऐमी

Answer 17

इसके बारे में सोचा था कि मैं इसे जटिल लेकिन अभी तक सरल दृष्टिकोण के साथ साझा करूँगा ... शायद किसी को कुछ उपयोगी मिलेगा।

/*Creates a new element - By Jamin Szczesny*/
function _new(args){
    ele = document.createElement(args.node);
    delete args.node;
    for(x in args){ 
        if(typeof ele[x]==='string'){
            ele[x] = args[x];
        }else{
            ele.setAttribute(x, args[x]);
        }
    }
    return ele;
}

/*You would 'simply' use it like this*/

$('body')[0].appendChild(_new({
    node:'div',
    id:'my-div',
    style:'position:absolute; left:100px; top:100px;'+
          'width:100px; height:100px; border:2px solid red;'+
          'cursor:pointer; background-color:HoneyDew',
    innerHTML:'My newly created div element!',
    value:'for example only',
    onclick:"alert('yay')"
}));

Answer 18

देशी js के साथ क्यों नहीं?

    var s="<span class='text-muted' style='font-size:.75em; position:absolute; bottom:3px; left:30px'>From <strong>Dan's Tools</strong></span>"
    var e=document.createElement('div')
    var r=document.createRange();
    r.selectNodeContents(e)
    var f=range.createContextualFragment(s);
    e.appendChild(f);
    e = e.firstElementChild;

Answer 19

function domify (str) {
  var el = document.createElement('div');
  el.innerHTML = str;

  var frag = document.createDocumentFragment();
  return frag.appendChild(el.removeChild(el.firstChild));
}

var str = "<div class='foo'>foo</div>";
domify(str);

Answer 20

आप पाठ को "HTML" तत्व में बदलने के लिए निम्नलिखित फ़ंक्शन का उपयोग कर सकते हैं

function htmlToElement(html)
{
  var element = document.createElement('div');
  element.innerHTML = html;
  return(element);
}
var html="<li>text and html</li>";
var e=htmlToElement(html);

Comments

-1; यह एक ही तकनीक है जो स्वीकृत उत्तर में प्रस्तावित है और इसमें समान कमियां हैं - विशेष रूप से, tdएस के लिए काम नहीं कर रहा है ।

— मार्क एमी

Answer 21

var jtag = $j.li({ child:'text' }); // Represents: <li>text</li>
var htmlContent = $('mylist').html();
$('mylist').html(htmlContent + jtag.html());

जेनरेटर का उपयोग करें

Answer 22

यहाँ मेरे लिए वर्किंग कोड है

मैं ' टेक्स्ट ' स्ट्रिंग को HTML एलिमेंट में बदलना चाहता था

var diva = UWA.createElement('div');
diva.innerHTML = '<a href="http://wwww.example.com">Text</a>';
var aelement = diva.firstChild;

Comments

क्या है wwww?

— तिनतिन T१

Answer 23

var msg = "test" jQuery.parseHTML (msg)

Comments

इस कोड स्निपेट के लिए धन्यवाद, जो कुछ सीमित, तत्काल सहायता प्रदान कर सकता है। एक उचित व्याख्या यह दर्शाती है कि यह समस्या का एक अच्छा समाधान क्यों है, यह दिखा कर इसके दीर्घकालिक मूल्य में बहुत सुधार होगा और यह भविष्य के पाठकों को अन्य, समान प्रश्नों के साथ और अधिक उपयोगी बना देगा। कृपया अपने स्पष्टीकरण को संपादित करने के लिए कुछ स्पष्टीकरण जोड़ने के लिए, जिसमें आपके द्वारा की गई धारणाएँ शामिल हैं।

— डविट्ज़

Answer 24

यह भी काम करेगा:

$('<li>').text('hello').appendTo('#mylist');

यह जंजीर फ़ंक्शन कॉल के साथ एक jquery तरीके की तरह अधिक महसूस करता है।

Comments

क्या यह jQuery की तरह महसूस करता है क्योंकि यह jQuery है?

— टिम फेरेल

वह अंतिम पंक्ति सिर्फ प्रफुल्लित करने वाली है!

— कुमारहर्ष kumar