DOM を置き換える JQuery の方法 nodes_jquery

この記事の例では、DOM ノードを JQuery に置き換える方法について説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

ノードを置換する場合、jQuery は対応するメソッド、replaceWith() と replaceAll() を提供します。

replaceWith() メソッドの機能は、一致するすべての要素を指定された HTML 要素または DOM 要素に置き換えることです。

この例の JQuery コード:

<script type="text/javascript">
//<![CDATA[
$(function(){
 $("#btn_1").click(function(){
  $(".nm_p").replaceWith('<p class="nm_p">欢迎访问www.jb51.net</p>'); 
 })
 $("#btn_2").click(function(){
  $(".nm_p").replaceWith('<p class="nm_p" title="欢迎访问脚本之家" >欢迎访问脚本之家</p>'); 
  // 同样的实现： $('<p class="nm_p">欢迎访问www.jb51.net</p>').replaceAll(".nm_p"); 
 })
});
//]]>
</script>

JQuery の別のメソッド replaceAll() を使用することもできます。これは replaceWith() メソッドと同じ効果がありますが、replaceWith() 操作が逆になる点が異なります。次の jQuery コードを使用して同じ機能を実現できます。 :

コードをコピーします コードは次のとおりです:

$('

ようこそwww.jb51 .net

').replaceAll(".nm_p");

JQuery コードのこれら 2 つの文は、ノード置換効果を実現します。

追記: 置換前にイベントが要素にバインドされていた場合、元々バインドされていたイベントは置換後に置換された要素とともに消えてしまうため、イベントを新しい要素に再バインドする必要があります。

この記事が皆さんの jQuery プログラミングに役立つことを願っています。