我们正在寻找从字符串中在javascript中创建DOM文档的方法，但不使用Jquery。有办法吗？ [我会这么认为，因为Jquery可以做到！]
对于那些好奇的人，我们不能使用Jquery，因为我们在Chrome应用程序的内容脚本的上下文中执行此操作，并且使用Jquery会使我们的内容脚本过于繁重。
如果你还在寻找一个anwer，并且对于其他任何人来说，我只是一直试图自己做同样的事情。看来你想看看javascript的DOMImplementation：
http://reference.sitepoint.com/javascript/DOMImplementation
这里很少提及兼容性，但它得到了相当好的支持。
实质上，要创建要操作的新文档，您需要创建一个新的Doctype对象（如果要输出一些基于标准的东西），然后使用新创建的Doctype变量创建新文档。
doctype和document都有多个选项，但是如果你要创建一个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);
全都是你的。
https://developer.mozilla.org/en-US/docs/Web/API/DOMParser
var parser = new DOMParser();
var doc = parser.parseFromString("<html_string>", "text/html");
（生成的doc变量是documentFragment对象）。
createDocumentFragment可能会帮助你。
https://developer.mozilla.org/En/DOM/DocumentFragment
浏览器总是使用空页面创建文档（about：blank）。也许，在Chrome应用程序中有一些可用的功能（如FF中的XUL），但在普通的javascript中没有这样的功能。
var dom = '<html><head>....</head><body>...</body></html>';
document.write(dom);
document.close();
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;
我尝试了其他一些方法，但在创建脚本元素（如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>`);
我能够通过在iframe上编写html字符串来实现这一点
const html = `<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
</body>
</html>`
const iframe = document.createElement('iframe')
iframe.contentDocument.open()
iframe.contentDocument.write(html)
iframe.contentDocument.close()
iframe.addEventListener('load', () => {
myDocumentObject = iframe.contentDocument
})
fetch("index.html", { // or any valid URL
method: "get"
}).then(function(e) {
return e.text().then(e => {
var t = document.implementation.createHTMLDocument("");
t.open();
t.write(e);
t.close();
return t;
});
}).then(e => {
// e will contain the document fetched and parsed.
console.log(e);
});
DOM元素具有innerHTML属性，允许完全更改其内容。因此，您可以创建一个容器并使用新的HTML内容填充它。
function createElementFromStr(htmlContent) {
var wrapperElm = document.createElement("div");
wrapperElm.innerHTML = htmlContent; // Ex: "<p id='example'>HTML string</p>"
console.assert(wrapperElm.children.length == 1); //Only one child at first level.
return wrapperElm.children[0];
}
*我知道这是一个老问题，但我希望能帮助别人。