एक HTML स्ट्रिंग से एक नया डोम तत्व का निर्माण का उपयोग कर निर्मित डोम तरीकों या प्रोटोटाइप

वोट
381

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

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

30/01/2009 को 00:13
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


23 जवाब

वोट
574

नोट: सबसे मौजूदा ब्राउज़र 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तरीकों।
30/01/2009 को 02:00
का स्रोत उपयोगकर्ता

वोट
11

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

HTML:

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

जे एस:

$('mylist').insert('<li>text</li>');
19/02/2009 को 14:13
का स्रोत उपयोगकर्ता

वोट
2

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

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

    var tr = div.getElementsByTagName('tr');
    // ...
}
21/05/2011 को 06:40
का स्रोत उपयोगकर्ता

वोट
22

नई DOM क्रियान्वयन है range.createContextualFragmentजो क्या आप एक रूपरेखा स्वतंत्र तरह से चाहता है,।

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

Feature         Chrome   Edge   Firefox(Gecko)  Internet Explorer   Opera   Safari
Basic support   (Yes)    (Yes)  (Yes)           11                  15.0    9.1.2
06/09/2011 को 20:53
का स्रोत उपयोगकर्ता

वोट
-5

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

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

यह अधिक श्रृंखलित समारोह कॉल के साथ एक jQuery रास्ता की तरह लगता है।

11/04/2012 को 21:02
का स्रोत उपयोगकर्ता

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

उपयोग jnerator

24/09/2012 को 23:39
का स्रोत उपयोगकर्ता

वोट
2

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

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

//, क्रोम 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>
13/12/2012 को 10:39
का स्रोत उपयोगकर्ता

वोट
13

यहाँ यह करने के लिए एक आसान तरीका:

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);
02/05/2013 को 23:02
का स्रोत उपयोगकर्ता

वोट
0

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

/*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')"
}));
21/09/2013 को 02:47
का स्रोत उपयोगकर्ता

वोट
6

कुछ एचटीएमएल टुकड़े के लिए की तरह <td>test</td>(सही संदर्भ के बिना) div.innerHTML, DOMParser.parseFromString और range.createContextualFragment, नहीं बनाएगा <td>तत्व।

jQuery.parseHTML () उन्हें संभालती है (मैं निकाले एक स्वतंत्र सार में jQuery 2 के parseHTML समारोह )।

एज 13+ के लिए, टेम्पलेट टैग इस्तेमाल करें:

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

var documentFragment = parseHTML('<td>Test</td>');
17/12/2015 को 09:42
का स्रोत उपयोगकर्ता

वोट
-1
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);
08/02/2016 को 08:59
का स्रोत उपयोगकर्ता

वोट
153

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

एक <template>एक HTML तत्व है जो एक बच्चे के रूप में किसी भी अन्य तत्व प्रकार की अनुमति है है। templateएक है .contentसंपत्ति है कि आप जावास्क्रिप्ट जो एक के लिए अंक के साथ उपयोग कर सकते हैं DocumentFragmentटेम्पलेट सामग्री के साथ। इसका मतलब यह है कि आप की स्थापना द्वारा डोम तत्वों के लिए एक HTML स्ट्रिंग में बदल सकते हैं innerHTMLएक के <template>तत्व है, तो में पहुँच templateकी .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 काफी काम नहीं करते। एचटीएमएल क्या तत्व प्रकार जो अन्य तत्व प्रकार के अंदर मौजूद करने की अनुमति है पर प्रतिबंध है, उदाहरण के लिए, यदि आप एक नहीं डाल सकते tdएक का एक सीधा बच्चे के रूप में div। यदि आप सेट करने का प्रयास करने के लिए गायब हो इन तत्वों का कारण बनता है innerHTMLएक के divलिए उन्हें शामिल करने के लिए। चूंकि <template>रों अपनी सामग्री पर इस तरह के कोई प्रतिबंध नहीं है, इस कमी को जब एक टेम्पलेट का उपयोग कर लागू नहीं होता।

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

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

13/02/2016 को 19:25
का स्रोत उपयोगकर्ता

वोट
2

मैं इस विधि (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>
08/06/2016 को 11:39
का स्रोत उपयोगकर्ता

वोट
13

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

const toNodes = html =>
    new DOMParser().parseFromString(html, 'text/html').body.childNodes
24/02/2017 को 19:48
का स्रोत उपयोगकर्ता

वोट
5

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

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

28/02/2017 को 12:31
का स्रोत उपयोगकर्ता

वोट
-2

आप तत्व के लिए पाठ "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);

11/07/2017 को 05:05
का स्रोत उपयोगकर्ता

वोट
3

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

Document.prototype.createElementFromString = function (str) {
    const element = new DOMParser().parseFromString(str, 'text/html');
    const child = element.documentElement.querySelector('body').firstChild;
    return child;
};
20/08/2017 को 16:24
का स्रोत उपयोगकर्ता

वोट
9

insertAdjacentHTML का प्रयोग करें ()। यह सब मौजूदा ब्राउज़र के साथ काम करता है, यहां तक ​​IE11 साथ।

var mylist = document.getElementById('mylist');
mylist.insertAdjacentHTML('beforeend', '<li>third</li>');
<ul id="mylist">
 <li>first</li>
 <li>second</li>
</ul>

28/10/2017 को 21:03
का स्रोत उपयोगकर्ता

वोट
-1

यहाँ मेरे लिए कोड काम कर रहा है

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

var diva = UWA.createElement('div');
diva.innerHTML = '<a href="http://wwww.example.com">Text</a>';
var aelement = diva.firstChild;
08/01/2018 को 08:23
का स्रोत उपयोगकर्ता

वोट
1

एचटीएमएल 5 <template>और ES6

डेमो

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

28/05/2018 को 10:45
का स्रोत उपयोगकर्ता

वोट
0

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

तो हम में सिंगल और डबल उद्धरण हो सकता है foo एचटीएमएल घोषणा।

इस तरह व्यवहार heredocs अवधि से परिचित लोगों के लिए।

इस परिसर में templating बनाने के लिए चर के साथ इसके अलावा बढ़ाया जा सकता है,:

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

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}

https://caniuse.com/template-literals

17/06/2018 को 19:34
का स्रोत उपयोगकर्ता

वोट
0

वर संदेश = "परीक्षण" jQuery.parseHTML (एमएसजी)

22/05/2019 को 12:11
का स्रोत उपयोगकर्ता

वोट
0

स्ट्रिंग से डोम रेंडर करने के लिए सबसे तेजी से समाधान:

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

और यहाँ यू की जांच कर सकते डोम हेरफेर के लिए प्रदर्शन देशी जे एस बनाम प्रतिक्रिया

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

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

और निकट भविष्य में निश्चित रूप से यू "तत्व" स्मृति कारण वर से संदर्भ का उपयोग अपने नए बनाए गए डोम अपने दस्तावेज़ में है।

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

16/01/2020 को 13:18
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more