ホームページ >ウェブフロントエンド >jsチュートリアル >innerHTML を使用せずに HTML を DOM に追加するにはどうすればよいですか?

innerHTML を使用せずに HTML を DOM に追加するにはどうすればよいですか?

Barbara Streisand
Barbara Streisandオリジナル
2024-11-03 23:46:31747ブラウズ

How to Append HTML to the DOM Without Using innerHTML?

InnerHTML を使用せずに HTML を DOM に追加する

HTML 文字列を DOM に追加する場合、div.innerHTML = を使用するシナリオが発生する可能性があります。 str;は受け入れられません。このような場合は、最新のすべてのブラウザでサポートされている insertAdjacentHTML メソッドを利用できます。

ID が「test」の div に HTML 文字列を追加するには、次のコードを使用できます。

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

insertAdjacentHTML メソッドを使用すると、指定した要素の末尾の前に HTML 文字列を挿入し、要素内に確実に挿入できます。 「beforeend」位置パラメータは、要素の最後の子の後に HTML を追加することを指定します。

insertAdjacentHTML メソッドを利用すると、HTML を DOM に追加する多用途かつ効率的な方法が得られます。 innerHTML プロパティ。特定のコンテキストではパフォーマンスへの影響やセキュリティの脆弱性が発生する可能性があります。

以上がinnerHTML を使用せずに HTML を DOM に追加するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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