HTML を DOM に安全かつ効率的に挿入するにはどうすればよいですか?-jsチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-11-04 13:11:01

オリジナル

442 人が閲覧しました

How to Inject HTML into Your DOM Safely and Efficiently?

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

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

ドキュメントに 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 サイトの他の関連記事を参照してください。