HTMLElementを文字列に変換する方法

Question 1

サーバー側とデータを交換するために、JavaScriptでXML要素を作成します。でできることがわかりましたdocument.createElement。しかし、それを文字列に変換する方法がわかりません。それを簡単にするためにブラウザにAPIはありますか？または、このAPIを含むJSライブラリはありますか？

編集：ブラウザAPI XMLSerializer、文字列にシリアル化する正しい方法であることがわかりました。

Question 2

要素のクローンを作成し、それを空の「オフステージ」コンテナーに追加して、コンテナーのinnerHTMLを読み取ることにより、「outer-html」を取得できます。

この例では、オプションの2番目のパラメーターを取ります。

document.getHTML（element、true）を呼び出して、要素の子孫を含めます。

document.getHTML= function(who, deep){
    if(!who || !who.tagName) return '';
    var txt, ax, el= document.createElement("div");
    el.appendChild(who.cloneNode(false));
    txt= el.innerHTML;
    if(deep){
        ax= txt.indexOf('>')+1;
        txt= txt.substring(0, ax)+who.innerHTML+ txt.substring(ax);
    }
    el= null;
    return txt;
}

Question 3

elementouterHTMLプロパティ（注：バージョン11以降のFirefoxでサポートされています）は、要素全体のHTMLを返します。

例

<div id="new-element-1">Hello world.</div>

<script type="text/javascript"><!--

var element = document.getElementById("new-element-1");
var elementHtml = element.outerHTML;
// <div id="new-element-1">Hello world.</div>

--></script>

同様に、を使用innerHTMLして、特定の要素内に含まれるHTMLを取得したりinnerText、要素内のテキストを取得したりできます（HTMLマークアップなし）。

関連項目

Question 4

最も簡単な方法は、その要素のinnerHTMLをtmp変数にコピーして空にし、新しい要素を追加してから、tmp変数をコピーして戻すことです。これは、jqueryスクリプトを頭のてっぺんに追加するために使用した例です。

var imported = document.createElement('script');
imported.src = 'http://code.jquery.com/jquery-1.7.1.js';
var tmpHead = document.head.innerHTML;
document.head.innerHTML = "";
document.head.append(imported);
document.head.innerHTML += tmpHead;

その単純な:)

Question 5

ありますtagNameプロパティは、およびattributesプロパティは、同様に：

var element = document.getElementById("wtv");
var openTag = "<"+element.tagName;
for (var i = 0; i < element.attributes.length; i++) {
    var attrib = element.attributes[i];
    openTag += " "+attrib.name + "=" + attrib.value;
}
openTag += ">";
alert(openTag);

HTML要素のすべての属性を反復処理する方法も参照してください。（やった！）

開始タグと終了タグの間のコンテンツを取得するには、innerHTMLすべての子要素を反復処理したくない場合に使用できます...

alert(element.innerHTML);

...次に、tagName。を使用して終了タグを再度取得します。

var closeTag = "</"+element.tagName+">";
alert(closeTag);

Question 6

これはすべての場合に当てはまるとは限りませんが、xmlから抽出するときにこの問題が発生し、これで解決しました。

function grab_xml(what){
var return_xml =null;
    $.ajax({
                type: "GET",
                url: what,
                success:function(xml){return_xml =xml;},
        async:   false
        });
return(return_xml);
}

次に、xmlを取得します。

var sector_xml=grab_xml("p/sector.xml");
var tt=$(sector_xml).find("pt");

次に、htmlタグを含むXMLファイルから読み取る必要がある場合に、この関数を作成してxml行を抽出しました。

    function extract_xml_line(who){
    var tmp = document.createElement("div");
    tmp.appendChild(who[0]);
    var tmp=$(tmp.innerHTML).html();
    return(tmp);
}

そして今結論する：

var str_of_html= extract_xml_line(tt.find("intro")); //outputs the intro tag and whats inside it: helllo  <b>in bold</b>

Question 7

私はAngularを使用していて、同じものが必要で、この投稿に着陸しました。

@ViewChild('myHTML', {static: false}) _html: ElementRef;
this._html.nativeElement;

Question 8

要素が全体であるとします[object HTMLDocument]。次の方法で文字列に変換できます。

const htmlTemplate = `<!DOCTYPE html><html lang="en"><head></head><body></body></html>`;

const domparser = new DOMParser();
const doc = domparser.parseFromString(htmlTemplate, "text/html"); // [object HTMLDocument]

const doctype = '<!DOCTYPE html>';
const html = doc.documentElement.outerHTML;

console.log(doctype + html);

スニペットを展開