Bagaimana untuk menggantikan elemen dom dengan jquery-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menggantikan elemen dom dengan jquery

WBOY

Lepaskan： 2022-06-17 19:41:16

asal

2079 orang telah melayarinya

Kaedah: 1. Gunakan kaedah replaceWith(), yang digunakan untuk semua elemen padanan dalam koleksi () Kaedah, yang digunakan untuk menggantikan elemen terpilih dengan elemen HTML baharu Sintaks ialah "elemen object.replaceAll(selector)".

Bagaimana untuk menggantikan elemen dom dengan jquery

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi jquery 3.6.0, komputer Dell G3.

Cara menggantikan elemen dom dengan jquery

1 kaedah replaceWith()

$(selector).replaceWith(content,function(index))

Salin selepas log masuk

kandungan diperlukan. Menentukan kandungan yang hendak disisipkan (boleh termasuk tag HTML).

Nilai yang mungkin:

elemen HTML
objek jQuery
DOM elemen

fungsi(indeks) Pilihan. Menentukan fungsi yang mengembalikan kandungan gantian.

indeks - Mengembalikan kedudukan indeks elemen dalam koleksi.

$(DOM).replaceWith(newContent) digunakan untuk menggantikan semua elemen padanan dalam koleksi dan mengembalikan koleksi elemen yang dipadam:

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.js"></script>
<script type="text/javascript">
$(&#39;document&#39;).ready(function (){
$(&#39;body>input&#39;).click(function (){
$(&#39;body>ul>li:gt(1)&#39;).replaceWith(&#39;<li>替换后的元素</li>&#39;)
})
})
</script>
</head>
<body>
<input type="button" value="替换">
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
</ul>
</body>
</html>

Salin selepas log masuk

Hasil keluaran:

2. kaedah replaceAll()

$(newContent).replaceAll(DOM) mempunyai fungsi yang sama seperti $(DOM).replaceWith(newContent) , cuma kedudukan parameter ditukar (gaya boleh ditetapkan terus kemudian):

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery.js"></script>
<script type="text/javascript">
$(&#39;document&#39;).ready(function (){
$(&#39;body>input&#39;).click(function (){
$(&#39;<li>替换后的元素</li>&#39;).replaceAll(&#39;body>ul>li:gt(1)&#39;).css(&#39;color&#39;,&#39;orange&#39;);
})
})
</script>
</head>
<body>
<input type="button" value="替换">
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
</ul>
</body>
</html>

Salin selepas log masuk

Hasil keluaran:

Cadangan tutorial video: Tutorial video jQuery

Atas ialah kandungan terperinci Bagaimana untuk menggantikan elemen dom dengan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!