Question

我们正在寻找从字符串中在javascript中创建 DOM文档的方法，但不使用Jquery。有办法吗？ [我会这么认为，因为Jquery可以做到！]

对于那些好奇的人，我们不能使用Jquery，因为我们是在Chrome应用程序的内容脚本环境中执行此操作，而使用Jquery会使我们的内容脚本过于沉重。

Answer 1

如果你还在寻找一个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);

全部。

Answer 2

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

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

（生成的doc变量是documentFragment对象。）

Answer 3

createDocumentFragment可能对您有帮助。

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

浏览器总是使用空页面创建文档（about：blank）。也许，在Chrome应用程序中有一些可用的功能（如FF中的XUL），但在普通的javascript中没有这样的功能。

Answer 4

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

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

Answer 5

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;

Answer 6

我尝试了其他一些方法，但在创建脚本元素（例如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>`);

Answer 7

我可以通过在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
})

Answer 8

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

Answer 9

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

* 我知道这是一个老问题，但我希望能帮助别人。

从字符串创建DOM文档，不使用JQuery

9 个答案: