jQuery DOM 操作 replaceWith() および replaceAll()

以前にノードの内部挿入、外部挿入、および削除メソッドを学習しました。このセクションでは、置換メソッド replaceWith

.replaceWith( newContent ) を学習します: セット内のすべての一致する要素を提供されたコンテンツで置き換え、セットを返します。簡単に言うと、$() を使用してノード A を選択し、replaceWith メソッドを呼び出し、新しいコンテンツ B (HTML 文字列、DOM 要素、または jQuery オブジェクト) を渡して、選択したノード A を置き換えます

簡単な例を見てみましょう: HTML コードの一部

<div>

<p>最初の段落</p>

<p>二番目の段落</p>
<p>三番目の段落</p>
< ;/div>

2番目の段落のノードとコンテンツを置き換えます

$("p:eq(1)").replaceWith('<a style="color:red">コンテンツを置き換えます2 番目の段落の </a>')

jQuery で 2 番目の p 要素をフィルターし、 replaceWith を呼び出して置き換えます。結果は次のようになります

<div>

<p>最初の段落</p> ;

<a style="color:red">2 番目の段落の内容を置き換えます</a>'
<p>3 番目の段落</p>
</div>

。 replaceAll( target ) : 各ターゲット要素をセットの一致する要素に置き換えます

.replaceAll() と .replaceWith() は同様の機能を持ちますが、ターゲットとソースが逆になります。上記の HTML 構造を使用して、 replaceAll を使用して処理します。

$('<a style ="color:red">2 番目の段落の内容を置換</a>').replaceAll('p:eq(1)')

概要:

replaceAll () と .replaceWith() は、主にターゲットとソースの場所の違いにより同様の機能を持ちます

replaceWith() メソッドと .replaceAll() メソッドは、ノードに関連付けられたすべてのデータとイベントハンドラーを削除します

replaceWith() メソッドは、他のほとんどの jQuery メソッドと同様に jQuery オブジェクトを返すため、他のメソッドとリンクできます

replaceWith() メソッドによって返される jQuery オブジェクトは、replaceWith による置換後のノードではなく、置換前のノードを参照します/replaceAll メソッド

以下の例を参照してください:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <style>

    .right div {
        background: yellow;
    }
    </style>
</head>

<body>
    <h2>replaceWith()和replaceAll()</h2>
    <div class="left">
        <button class="bt1">点击,通过replaceWith替换内容</button>
        <button class="bt2">点击,通过rreplaceAll替换内容</button>
    </div>
    <div class="right">
        <div>
            <p>第一段</p>
            <p>第二段</p>
            <p>第三段</p>
        </div>
        <div>
            <p>第四段</p>
            <p>第五段</p>
            <p>第六段</p>
        </div>
    </div>
    <script type="text/javascript">
    //只克隆节点
    //不克隆事件
    $(".bt1").click(function(){
        //找到内容为第二段的p元素
        //通过replaceWith删除并替换这个节点
        $(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替换第二段的内容</a>')
    })
    </script>
    <script type="text/javascript">
    //找到内容为第六段的p元素
    //通过replaceAll删除并替换这个节点
    $(".bt2").click(function() {
        $('<a style="color:red">replaceAll替换第六段的内容</a>').replaceAll('.right > div:last p:last');
    })
    </script>
</body>

</html>

学び続ける

新しいファイル

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <style> .right div { background: yellow; } </style> </head> <body> <h2>replaceWith()和replaceAll()</h2> <div class="left"> <button class="bt1">点击,通过replaceWith替换内容</button> <button class="bt2">点击,通过rreplaceAll替换内容</button> </div> <div class="right"> <div> <p>第一段</p> <p>第二段</p> <p>第三段</p> </div> <div> <p>第四段</p> <p>第五段</p> <p>第六段</p> </div> </div> <script type="text/javascript"> //只克隆节点 //不克隆事件 $(".bt1").click(function(){ //找到内容为第二段的p元素 //通过replaceWith删除并替换这个节点 $(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替换第二段的内容</a>') }) </script> <script type="text/javascript"> //找到内容为第六段的p元素 //通过replaceAll删除并替换这个节点 $(".bt2").click(function() { $('<a style="color:red">replaceAll替换第六段的内容</a>').replaceAll('.right > div:last p:last'); }) </script> </body> </html>

提出するリセットコード

自動運転