JavaScript で HTML 文字列から DOM 要素を作成するにはどうすればよいですか?

HTML 文字列からの DOM 要素の作成

クエリは、HTML 文字列を親要素に追加できる DOM 要素に変換する可能性を調べます。 appendChild() を使用します。 innerHTML や innerText などの他のメソッドも存在しますが、必要なレベルの柔軟性や制御が提供されません。

JavaScript では、DOMParser を利用してこの変換を実現できます。このパーサーは、HTML 文字列を入力として受け取り、HTML コンテンツを表すドキュメント オブジェクトを生成します。解析されたドキュメントにアクセスして、対応する DOM 要素を取得できます。

たとえば、JavaScript 変数として保存されている次の HTML 文字列を考えてみましょう。

const htmlString = "<div><a href='#'>Link</a><span></span></div>";

この文字列を DOM に変換するには

const doc = new DOMParser().parseFromString(htmlString, "text/xml");
const firstChildElement = doc.firstChild;

firstChildElement は

要素を表すようになりました。 HTML 文字列の要素。さらに、 などの子ノードにアクセスできます。 <スパン>後続の操作用の要素。

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

JavaScript html String Object for while using dom this innerHTML transform input Access Other

声明：

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