JavaScript で生の HTML 文字列を DOM に安全に追加するにはどうすればよいですか?

生の HTML 文字列を DOM 要素に変換して追加する

JavaScript には、innerHTML プロパティや innerText プロパティの変更など、HTML コンテンツを操作するさまざまな方法が用意されています。 DOM 要素。ただし、場合によっては、appendChild() などのメソッドで使用するために、生の HTML 文字列を DOM 要素に変換する必要があります。

DOMParser の使用

DOMParser インターフェイスでは解析が可能ですXML および HTML 文字列を DOM 要素に変換します。 DOMParser を使用して生の HTML 文字列を DOM 要素に変換するには:

var xmlString = "<div><a href='#'>Link</a><span></span></div>";
var doc = new DOMParser().parseFromString(xmlString, "text/xml");

parseFromString() メソッドは HTML 文字列を解析し、解析された DOM 構造を含む Document オブジェクトを返します。

DOM 要素へのアクセス

解析されたドキュメント内の個々の DOM 要素にアクセスするには:

console.log(doc.firstChild.innerHTML); // Outputs: <a href='#'>Link...</a>
console.log(doc.firstChild.firstChild.innerHTML); // Outputs: Link

使用法

解析された DOM 要素は次のことができます。これで、appendChild() に渡されるか、次のような他の DOM 操作タスクに使用されます。

var parentElement = document.getElementById("container");
parentElement.appendChild(doc.firstChild);

これにより、解析された HTML 文字列が DOM 要素として #container 要素に効果的に追加されます。

注: 生の HTML 文字列を直接追加するのではなく、DOMParser 経由で取得した解析済みの DOM 要素で appendChild() を使用することが重要です。後者はセキュリティ上の脆弱性を引き起こす可能性があるためです。

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