[解決済み] 内蔵DOMメソッドやPrototypeを使ってHTML文字列から新しいDOM要素を作成する

質問

ある要素を表すHTML文字列があります。 '<li>text</li>' . これを DOM 内の要素に追加したい ( ul 私の場合）。PrototypeやDOMメソッドでこれを行うにはどうしたらよいでしょうか？

(jQueryで簡単にできるのはわかっているのですが、あいにくjQueryは使っていません。)

どのように解決するのですか？

注意事項 現在のほとんどのブラウザは HTML をサポートしています。 <template> これは、文字列から要素を作成するための、より信頼性の高い方法を提供します。参照 詳細は以下のMark Ameryの回答 .

古いブラウザ、およびnode/jsdomの場合 : (これはまだ <template> 要素を使用する場合は、次のメソッドを使用します。これは、ライブラリが HTML の文字列から DOM 要素を取得するために行っていることと同じです ( IE用に少し手を加えて の実装のバグを回避するために innerHTML ):

function createElementFromHTML(htmlString) {
  var div = document.createElement('div');
  div.innerHTML = htmlString.trim();

  // Change this to div.childNodes to support multiple top-level nodes.
  return div.firstChild;
}

HTML テンプレートとは異なり、この ではありません。 の子要素になりえない要素もあります。 <div> のような <td> s.

すでにライブラリを使っている場合は、ライブラリで認められているHTMLの文字列から要素を作成する方法にこだわることをお勧めします。

• Prototypeにはこの機能が組み込まれており update() メソッド .
• jQueryでは、その jQuery(html) と jQuery.parseHTML メソッドを使用します。