如何將字符串轉換爲DOM元素

-1

在某人可以正確回答問題之前，可能會先詢問並回答此問題或已解決問題。萬一有人爲它網上搜尋這裏就是答案：如何將字符串轉換爲DOM元素

https://developer.mozilla.org/en-US/docs/DOM/DOMParser

var parser = new DOMParser(); 
var doc = parser.parseFromString(stringContainingXMLSource, "application/xml"); 
// returns a Document, but not a SVGDocument nor a HTMLDocument 

parser = new DOMParser(); 
doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml"); 
// returns a SVGDocument, which also is a Document. 

parser = new DOMParser(); 
doc = parser.parseFromString(stringContainingHTMLSource, "text/html"); 
// returns a HTMLDocument, which also is a Document. 



/* 
* DOMParser HTML extension 
* 2012-09-04 
* 
* By Eli Grey, http://eligrey.com 
* Public domain. 
* NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK. 
*/ 

/*! @source https://gist.github.com/1129031 */ 
/*global document, DOMParser*/ 

(function(DOMParser) { 
    "use strict"; 

    var 
     DOMParser_proto = DOMParser.prototype 
    , real_parseFromString = DOMParser_proto.parseFromString 
    ; 

    // Firefox/Opera/IE throw errors on unsupported types 
    try { 
     // WebKit returns null on unsupported types 
     if ((new DOMParser).parseFromString("", "text/html")) { 
      // text/html parsing is natively supported 
      return; 
     } 
    } catch (ex) {} 

    DOMParser_proto.parseFromString = function(markup, type) { 
     if (/^\s*text\/html\s*(?:;|$)/i.test(type)) { 
      var 
       doc = document.implementation.createHTMLDocument("") 
      ; 

      doc.body.innerHTML = markup; 
      return doc; 
     } else { 
      return real_parseFromString.apply(this, arguments); 
     } 
    }; 
}(DOMParser));

來源

2013-03-26 HMR

我們非常感謝你的努力來幫助！請單獨發佈問題和答案。然後將答案標記爲已接受。 – 2013-03-26 12:30:25

我想你引用的任何問題都是作爲這個副本關閉的：http://stackoverflow.com/questions/3103962/converting-html-string-into-dom-elements。這不是一個問題。你應該在相關問題上發佈這個答案。 – 2013-03-26 12:30:42

好的，我會將答案作爲答案發布。只是看到一個問題，因爲它被錯誤地問了，但很可能會出現在谷歌某些時候，因爲該操作不會刪除它。如果管理員提出問題，最好將其刪除或改述，以便將來的求助者不會偶然發現未回覆的垃圾。 – HMR 2013-03-26 12:32:30

https://developer.mozilla.org/en-US/docs/DOM/DOMParser

var parser = new DOMParser(); 
var doc = parser.parseFromString(stringContainingXMLSource, "application/xml"); 
// returns a Document, but not a SVGDocument nor a HTMLDocument 

parser = new DOMParser(); 
doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml"); 
// returns a SVGDocument, which also is a Document. 

parser = new DOMParser(); 
doc = parser.parseFromString(stringContainingHTMLSource, "text/html"); 
// returns a HTMLDocument, which also is a Document.

有些瀏覽器不支持文本/ HTML，所以這裏是從MDN網站額外的代碼添加對文本/ html的支持

/* 
* DOMParser HTML extension 
* 2012-09-04 
* 
* By Eli Grey, http://eligrey.com 
* Public domain. 
* NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK. 
*/ 

/*! @source https://gist.github.com/1129031 */ 
/*global document, DOMParser*/ 

(function(DOMParser) { 
    "use strict"; 

    var 
     DOMParser_proto = DOMParser.prototype 
    , real_parseFromString = DOMParser_proto.parseFromString 
    ; 

    // Firefox/Opera/IE throw errors on unsupported types 
    try { 
     // WebKit returns null on unsupported types 
     if ((new DOMParser).parseFromString("", "text/html")) { 
      // text/html parsing is natively supported 
      return; 
     } 
    } catch (ex) {} 

    DOMParser_proto.parseFromString = function(markup, type) { 
     if (/^\s*text\/html\s*(?:;|$)/i.test(type)) { 
      var 
       doc = document.implementation.createHTMLDocument("") 
      ; 

      doc.body.innerHTML = markup; 
      return doc; 
     } else { 
      return real_parseFromString.apply(this, arguments); 
     } 
    }; 
}(DOMParser));

IE8及以下

像IE8瀏覽器的一些及以下不具備的DOMParser，您可以分析一個字符串以下列方式爲HTML：

var div=document.createElement("div"); 
div.innerHTML=HTMLString; 
var anchors=div.getElementsByTagName("a");

來源

2013-03-26 12:34:44 HMR