JavaScript の組み込みメソッドまたはプロトタイプを使用して HTML 文字列から DOM 要素を作成するにはどうすればよいですか?

HTML 文字列から DOM 要素を作成: 組み込みメソッドとプロトタイプを調べる

HTML 文字列を DOM 要素に変換するという課題に直面したとき、開発者は、jQuery などの JavaScript フレームワークを利用することがよくあります。ただし、フレームワークをプロジェクトに組み込むことが常に可能であるとは限りません。このようなシナリオでは、組み込み DOM メソッドまたはプロトタイプを使用してこのタスクを実行する方法を知ることが重要になります。

DOM メソッド

document.createElement() メソッドは、 JavaScript で新しい DOM 要素を作成するための基本的な方法。要素のタグ名を指定すると、要素を生成して既存のノードに追加できます。例:

var li = document.createElement('li');
li.innerHTML = 'text';
var ul = document.querySelector('ul');
ul.appendChild(li);

Prototype

Prototype の update() メソッドは、HTML 文字列から DOM 要素を作成および更新する便利な方法を提供します。 HTML 文字列を解析し、結果の要素を指定されたノードに挿入します。

var li = document.createElement('li');
li.update('<li>text</li>');
var ul = document.querySelector('ul');
ul.appendChild(li);

代替アプローチ

最新のメソッドをサポートしていない古いブラウザーおよび環境用、フォールバック アプローチには、一時的なコンテナ要素の作成とその innerHTML の操作が含まれます。

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

このメソッドは次のとおりです。 IE のバグのある innerHTML 実装の信頼できる回避策ですが、

の子にできない特定の要素はサポートされていません。

結論

ビルドされた- DOM メソッドまたはプロトタイプでは、開発者はフレームワークに依存しなくても HTML 文字列から DOM 要素を作成できます。どのアプローチを選択するかは、プロジェクトの特定の要件と JavaScript 環境によって異なります。

以上がJavaScript の組み込みメソッドまたはプロトタイプを使用して HTML 文字列から DOM 要素を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

JavaScript jquery html String for using append dom this prototype innerHTML

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。