从字符串创建一个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

回答

相关问题