jQuery - Tambah elemen

Menambah kandungan HTML baharu

Kami akan mempelajari empat kaedah jQuery untuk menambah kandungan baharu:

tambah() - Masukkan kandungan di hujung elemen yang dipilih

tambahkan () - Sisipkan kandungan pada permulaan elemen yang dipilih

selepas() - Sisipkan kandungan selepas elemen yang dipilih

sebelum() - Sisipkan kandungan sebelum elemen yang dipilih

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(" <b>追加文本</b>。");
  });
  $("#btn2").click(function(){
    $("ol").append("<li>追加列表项</li>");
  });
});
</script>
</head>
<body>
<p>段落。</p>
<p>另一个段落。</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>
</body>
</html>

kaedah >prepend()

kaedah jQuery prepend() memasukkan kandungan pada permulaan elemen yang dipilih. Kaedah

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend("<b>在开头追加文本</b>。 ");
});
$("#btn2").click(function(){
$("ol").prepend("<li>在开头添加列表项</li>");
});
});
</script>
</head>
<body>
<p>段落。</p>
<p>另一个段落。</p>
<ol>
<li>列表 1</li>
<li>列表 2</li>
<li>列表 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>
</body>
</html>

append() dan prepend() boleh menerima bilangan elemen baharu yang tidak terhad melalui parameter. Teks/HTML boleh dijana melalui jQuery (seperti dalam contoh di atas), atau melalui kod JavaScript dan elemen DOM.


after() dan before()

kaedah jQuery after() memasukkan kandungan selepas elemen yang dipilih.

Kaedah jQuery before() memasukkan kandungan sebelum elemen yang dipilih.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("span").before("<b>之前</b>");
  });
  $("#btn2").click(function(){
    $("span").after("<i>之后</i>");
  });
});
</script>
</head>
<body>
<span style="font-size: 30px;">内容</span>
<br><br>
<button id="btn1">之前插入</button>
<button id="btn2">之后插入</button>
</body>
</html>

Kaedah selepas() dan sebelum() boleh menerima bilangan elemen baharu yang tidak terhad melalui parameter. Elemen baharu boleh dibuat melalui teks/HTML, jQuery atau JavaScript/DOM.

Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").append(" <b>Hello jQuery!</b>"); }); }); </script> </head> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>在每个 p 元素的结尾添加内容</button> </body> </html>
  • Cadangan kursus
  • Muat turun perisian kursus