web-dev-qa-db-ja.com

HTMLDivElementから文字列を作成します

私ができるようにしたいのは、JavascriptHTMLElementオブジェクトから文字列を作成することです。例えば：

var day = document.createElement("div");
day.className = "day";
day.textContent = "Random Text";

これで、day HTMLDivElementオブジェクトが作成されました。文字列として出力することはできますか？例えば.

<div class="day">Random Text</div>
javascriptarraysstringtostring
15
Matthew Brown

Gumpの実装がターゲットノードをドキュメントから持ち上げるため、Gumpのラッパーのバリアント。

function nodeToString ( node ) {
   var tmpNode = document.createElement( "div" );
   tmpNode.appendChild( node.cloneNode( true ) );
   var str = tmpNode.innerHTML;
   tmpNode = node = null; // prevent memory leaks in IE
   return str;
}

結果の文字列を画面に出力するには（re：escaped）

var escapedStr = nodeToString( node ).replace( "<" , "&lt;" ).replace( ">" , "&gt;");
outputNode.innerHTML += escapedStr;

「class」、「id」などの属性が適切に文字列化されているかどうかは疑わしいことに注意してください。

20
BGerrissen

この関数を使用できます（pure.jsから取得）

function outerHTML(node){
 return node.outerHTML || new XMLSerializer().serializeToString(node);
}
15
Christoffer Klang

その要素を別の要素にラップして、innerHTMLを使用できます。

var wrapper = document.createElement("div");
wrapper.appendChild(day);
var str = wrapper.innerHTML;
5
Gumbo

最後の回答から数年が経過してから、私は.outerHTMLは、すべての主要なブラウザでサポートされているようです（ https://caniuse.com/#search=outerhtml を参照）。したがって、JS要素のHTMLを取得するには、次のようにします。

var day = document.createElement("div");
day.className = "day";
day.textContent = "Random Text";

console.log(day.outerHTML)

それはあなたに与えます：<div class="day">Random Text</div>

4
Panni

次のように、作成した要素のテキストを追加するには、テキストノードを作成する必要があります。

var day = document.createElement("div");
day.className = "day";
// create text node
var txt = document.createTextNode('Random Text');
// add text to div now
day.appendChild(txt);
// append to body
document.body.appendChild(day);
2
Sarfraz

文字列を直接解析できるのに、なぜcreateElementを使用するのでしょうか。お気に入り： var string = '<div class="' + class + '">' + text + '</div>';

1
Stijn Martens