HTML を DOM に安全かつ効率的に挿入するにはどうすればよいですか?

DOM への HTML の挿入: 総合ガイド

DOM への HTML 文字列の追加は、Web 開発における一般的なタスクです。この記事では、禁止されている innerHTML プロパティに頼らずにこれを実現する効果的な方法を検討します。

insertAdjacentHTML() の力を解き放つ

ドキュメントに HTML を動的に追加するには、次のことを検討してください。 insertAdjacentHTML() メソッド。この機能は最新のブラウザで広くサポートされており、DOM を安全かつ効率的に操作する方法を提供します。

構文と使用法

insertAdjacentHTML() メソッドは 2 つのパラメータを取ります:

• position: HTML を挿入する位置。有効な値は次のとおりです。

  • beforebegin: 要素の開始前
  • afterbegin: 要素内、最初の子の前
  • beforeend: 要素内、後最後の子
  • afterend: の終了後element
• html: 挿入する HTML 文字列

実際の例

< があると想像してください。 ;ディビジョン> id が test の要素。この要素に HTML 文字列を追加するには、次のコードを使用します。

let str = '<p>Just some <span>text</span> here</p>';
const div = document.getElementById('test');
div.insertAdjacentHTML('beforeend', str);

これにより、HTML が

内に挿入されます。

ライブ デモンストレーション

視覚的なデモンストレーションについては、次の JSFiddle を参照してください: http://jsfiddle.net/euQ5n/

結論

insertAdjacentHTML() を使用すると、DOM を操作するための堅牢で相互互換性のあるソリューションが提供されます。 HTML 文字列を Web ページに簡単に挿入できるその機能を活用してください。

以上がHTML を DOM に安全かつ効率的に挿入するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

html String for include Property append dom this innerHTML position http

声明：

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