HTML-tekenreeks converteren naar DOM-elementen?

Antwoord 2, autoriteit 52%

U maakt meestal een tijdelijk bovenliggend element waarnaar u de innerHTMLkunt schrijven en vervolgens de inhoud extraheren:

var wrapper= document.createElement('div');
wrapper.innerHTML= '<div><a href="#"></a><span></span></div>';
var div= wrapper.firstChild;

Als het element waarvan u de buitenste HTML-code heeft een eenvoudige <div>is zoals hier, is dit eenvoudig. Als het misschien iets anders is dat niet zomaar overal kan, heb je misschien meer problemen. Als het bijvoorbeeld een <li>was, zou de bovenliggende wrapper een <ul>moeten zijn.

Maar IE kan innerHTMLniet schrijven op elementen zoals <tr>dus als je een <td>had, zou je moet de hele HTML-tekenreeks in <table><tbody><tr>…</tr></tbody></table>, schrijf datnaar innerHTMLen haal de daadwerkelijke <td>die je wilde van een paar niveaus naar beneden.

Antwoord 3, autoriteit 17%

Waarom gebruikt u insertAdjacentHTML

niet

bijvoorbeeld:

// <div id="one">one</div> 
var d1 = document.getElementById('one'); 
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>here

Antwoord 4, autoriteit 4%

Bekijk de pure JavaScript HTML-parservan John Resig.

EDIT: als je wilt dat de browser de HTML voor je parseert, is innerHTMLprecies wat je wilt. Van deze SO-vraag:

var tempDiv = document.createElement('div');
tempDiv.innerHTML = htmlString;

Antwoord 5

Ok, ik realiseerde me het antwoord zelf, nadat ik moest nadenken over de antwoorden van anderen. 😛

var htmlContent = ... // a response via AJAX containing HTML
var e = document.createElement('div');
e.setAttribute('style', 'display: none;');
e.innerHTML = htmlContent;
document.body.appendChild(e);
var htmlConvertedIntoDom = e.lastChild.childNodes; // the HTML converted into a DOM element :), now let's remove the
document.body.removeChild(e);

Antwoord 6

Hier is een kleine code die handig is.

var uiHelper = function () {
var htmls = {};
var getHTML = function (url) {
                /// <summary>Returns HTML in a string format</summary>
                /// <param name="url" type="string">The url to the file with the HTML</param>
    if (!htmls[url])
    {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", url, false);
    xmlhttp.send();
    htmls[url] = xmlhttp.responseText;
     };
     return htmls[url];
    };
        return {
            getHTML: getHTML
        };
}();

–Converteer de HTML-tekenreeks in een DOM-element

String.prototype.toDomElement = function () {
        var wrapper = document.createElement('div');
        wrapper.innerHTML = this;
        var df= document.createDocumentFragment();
        return df.addChilds(wrapper.children);
};

–prototype helper

HTMLElement.prototype.addChilds = function (newChilds) {
        /// <summary>Add an array of child elements</summary>
        /// <param name="newChilds" type="Array">Array of HTMLElements to add to this HTMLElement</param>
        /// <returns type="this" />
        for (var i = 0; i < newChilds.length; i += 1) { this.appendChild(newChilds[i]); };
        return this;
};

–Gebruik

thatHTML = uiHelper.getHTML('/Scripts/elevation/ui/add/html/add.txt').toDomElement();

Antwoord 7

Geef gewoon een idaan het element en verwerk het normaal, bijvoorbeeld:

<div id="dv">
<a href="#"></a>
<span></span>
</div>

Je kunt nu het volgende doen:

var div = document.getElementById('dv');
div.appendChild(......);

Of met jQuery:

$('#dv').get(0).appendChild(........);

Antwoord 8

Je kunt het als volgt doen:

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