DOM文書をJavascriptで文字列から作成する方法を探していますが、Jqueryは使用していません。 これを行う方法はありますか？ [Jqueryはこれを行うことができると思います]JQueryを使用せずに文字列からDOM文書を作成
Jqueryは、Chromeアプリケーションのコンテンツスクリプトのコンテキストでこれを行うため、Jqueryを使用できません.Jqueryを使用すると私たちのコンテンツスクリプトは重すぎます。
あなたがまだアンヴェールを探していて、それを渡って来る他の人のために、私は自分自身で同じことをやろうとしています。
http://reference.sitepoint.com/javascript/DOMImplementation
は数参照がここにも互換性がありますが、それはかなりよくサポートされています：それはあなたの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);
全てあなたのもの。
var dom = '<html><head>....</head><body>...</body></html>';
document.write(dom);
document.close();
これは、ドキュメントの現在の内容を上書きしませんか？ –
それはポイントではありませんでしたか？おそらく私は誤解しているかもしれません – Manatok
いいえ、私は新しい文書を作成し、その上で操作を行うことができますが、前の文書を取り除くことはできません:( –
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;
createDocumentFragmentあなたを助けるかもしれません。
https://developer.mozilla.org/En/DOM/DocumentFragment
ブラウザは、常に空のページ（約：空白）と自分自身でドキュメントを作成します。 Chromeアプリケーションでは、FFでのXULのようないくつかの機能が利用できますが、通常のjavascriptではそのような機能はありません。
それはprmisingと思われましたが、残念ながらDocumentFragmentを文字列（ –
https://developer.mozilla.org/en-US/docs/Web/API/DOMParser
var parser = new DOMParser();
var doc = parser.parseFromString("<html_string>", "text/html");
（得doc変数がDocumentFragmentオブジェクトです）。
私はここで他の方法を試しましたが、実際にはsrc属性が指す実際の.jsファイルを読み込むことを拒否するなどのスクリプト要素を作成する際に問題が発生しました。以下は私にとって最も効果的なものです。
DOMParserを使用するよりも3倍高速で、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>`);
JS + Adobe AIRが '
'タグを 'document.implementation.createHTMLDocument'で食べた後、これが私の問題を解決しました！ありがとうございました!! –私はdocument.bodyを持っていますしかし、createHTMLDocumentではheadタグはありません。:( – holden321