從字符串創建一個DOM文檔，沒有JQuery

我們正在尋找方法來創建一個DOM文檔 JavaScript中的字符串，但不使用JQuery。有沒有辦法做到這一點？ [我會這樣認爲的，因爲jquery可以做到這一點！]從字符串創建一個DOM文檔，沒有JQuery

對於那些好奇，我們不能使用Jquery，因爲我們在Chrome應用程序的內容腳本的上下文中，並使用Jquery只會使我們的內容腳本太重了。

來源

2012-03-07 Julien Genestoux

如果你仍然在尋找一個污水管，並且對其他任何人來說，我只是一直試圖自己做同樣的事情。看來你要尋找在JavaScript的的DOMImplementation：

http://reference.sitepoint.com/javascript/DOMImplementation

很少有提及，以及這裏的兼容性，但它是相當不錯的支持。

實質上，要創建一個新文檔來操作，您需要創建一個新的Doctype對象（如果您要輸出一些基於標準的東西），然後使用新創建的Doctype變量創建新文檔。

doctype和文檔都有多個選項，但是如果您要創建HTML5文檔，看起來您希望將它們中的大部分保留爲空字符串。

示例（新HTML5 DOM文檔）：

var doctype = document.implementation.createDocumentType('html', '', ''); 

var dom = document.implementation.createDocument('', 'html', doctype);

新的文件現在看起來是這樣的：

<!DOCTYPE html> 
<html> 
</html>

示例（新XHTML DOM文檔）：

var doctype = document.implementation.createDocumentType(
    'html', 
    '-//W3C//DTD XHTML 1.0 Strict//EN', 
    'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd' 
); 

var dom = document.implementation.createDocument(
    'http://www.w3.org/1999/xhtml', 
    'html', 
    doctype 
);

所以它取決於你填充它的其餘部分。你可以簡單地這樣做，因爲改變

dom.documentElement.innerHTML = '<head></head><body></body>';

或者與更嚴格的去：

var head = dom.createElement('head'); 
var body = dom.createElement('body'); 
dom.documentElement.appendChild(head); 
dom.documentElement.appendChild(body);

都是你的。

來源

2012-08-17 12:42:01 woosteln

JS + Adobe AIR經過數小時用'document.implementation.createHTMLDocument'吃掉我的''標籤，這解決了我的問題！非常感謝！ – 2013-07-19 07:25:40

我有document.body是空的，但用createHTMLDocument沒有頭標籤。:( – holden321 2013-11-07 19:45:24

var dom = '<html><head>....</head><body>...</body></html>'; 

document.write(dom); 
document.close();

來源

2012-03-07 09:39:40 Manatok

這會不會覆蓋文件的當前內容？ – 2012-03-07 09:43:30

這不是重點嗎？也許我誤解了 – Manatok 2012-03-07 10:28:18

不，我只是想能夠創建一個新的文檔，並對其進行操作，但肯定不會擺脫前一個:( – 2012-03-07 10:31:08

HTML想這樣的：

<html> 
<head></head> 
<body> 
    <div id="toolbar_wrapper"></div> 
</body> 
</html>

JS是這樣的：

var data = '<div class="toolbar">'+ 
       '<button type="button" class="new">New</button>'+ 
       '<button type="button" class="upload">Upload</button>'+ 
       '<button type="button" class="undo disabled">Undo</button>'+ 
       '<button type="button" class="redo disabled">Redo</button>'+ 
       '<button type="button" class="save disabled">Save</button>'+ 
      '</div>'; 
document.getElementById("toolbar_wrapper").innerHTML = data;

來源

2012-03-07 09:40:45

createDocumentFragment可以幫助你。

https://developer.mozilla.org/En/DOM/DocumentFragment

瀏覽器始終由自己創建的文檔與空頁（約：空白）。也許，在Chrome應用程序中有一些可用的功能（如FF中的XUL），但是在普通的javascript中沒有這樣的功能。

來源

2012-03-07 09:43:36 kirilloid

因此，這似乎prmising，但不幸的是，DocumentFragment的不能從字符串填充，這將不適合我需要:( – 2012-03-08 10:11:30

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

var parser = new DOMParser(); 
var doc = parser.parseFromString("<html_string>", "text/html");

（所得doc變量是一個的DocumentFragment對象）。

來源

2016-01-05 12:50:45 apratimankur

我嘗試了其他一些方法，但在那裏創建腳本元素（如Chrome）拒絕加載由src屬性指向的實際.js文件時出現問題。以下是最適合我的方式。

它比jQuery快3倍，比使用DOMParser快3.5倍，但速度比以編程方式創建元素慢2倍。
https://www.measurethat.net/Benchmarks/Show/2149/0

Object.defineProperty(HTMLElement, 'From', { 
    enumerable: false, 
    value: (function (document) { 
     //https://www.measurethat.net/Benchmarks/Show/2149/0/element-creation-speed 
     var rgx = /(\S+)=(["'])(.*?)(?:\2)|(\w+)/g; 
     return function CreateElementFromHTML(html) { 
      html = html.trim(); 
      var bodystart = html.indexOf('>') + 1, bodyend = html.lastIndexOf('<'); 
      var elemStart = html.substr(0, bodystart); 
      var innerHTML = html.substr(bodystart, bodyend - bodystart); 
      rgx.lastIndex = 0; 
      var elem = document.createElement(rgx.exec(elemStart)[4]); 
      var match; while ((match = rgx.exec(elemStart))) { 
       if (match[1] === undefined) { 
        elem.setAttribute(match[4], ""); 
       } else { 
        elem.setAttribute(match[1], match[3]); 
       } 
      } 
      elem.innerHTML = innerHTML; 
      return elem; 
     }; 
    }(window.document)) 
});

應用實例：

HTMLElement.From(`<div id='elem with quotes' title='Here is "double quotes" in single quotes' data-alt="Here is 'single quotes' in double quotes"><span /></div>`); 
HTMLElement.From(`<link id="reddit_css" type="text/css" rel="stylesheet" async href="https://localhost/.js/sites/reddit/zinject.reddit.css">`); 
HTMLElement.From(`<script id="reddit_js" type="text/javascript" async defer src="https://localhost/.js/sites/reddit/zinject.reddit.js"></script>`); 
HTMLElement.From(`<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">`); 
HTMLElement.From(`<div id='Sidebar' class='sidebar' display=""><div class='sb-handle'></div><div class='sb-track'></div></div>`);

來源

2017-12-12 19:21:45

從字符串創建一個DOM文檔，沒有JQuery

回答

相關問題