innerHTML を変更するときにイベント リスナーの損失を防ぐにはどうすればよいですか?

Patricia Arquette

リリース： 2024-12-15 19:40:19

オリジナル

533 人が閲覧しました

< script>

mydiv = document.getElementById("mydiv");
mydiv.innerHTML += "bar";

ここでは、 「foo」を含むスパンにアタッチされた onclick イベント ハンドラーは、mydiv.innerHTML への割り当て後に破棄されます。

この問題を回避するには、.innerHTML の代わりに .insertAdjacentHTML() メソッドを使用します。このメソッドはイベント リスナーを保持し、すべての主要なブラウザでサポートされています。

<script></p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">var html_to_insert = "<p>New paragraph</p>";
document.getElementById('mydiv').insertAdjacentHTML('beforeend', html_to_insert);