Ajout d'un nouveau contenu HTML
Nous allons apprendre quatre méthodes jQuery pour ajouter un nouveau contenu :
append() - Insérer du contenu à la fin de l'élément sélectionné
prepend () - Insérer du contenu au début de l'élément sélectionné
after() - Insérer du contenu après l'élément sélectionné
before() - Insérer du contenu avant l'élément sélectionné
<!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>Méthode prepend()
La méthode jQuery prepend() insère du contenu au début de l'élément sélectionné. Les méthodes
<!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() et prepend() sont capables de recevoir un nombre illimité de nouveaux éléments via des paramètres. Le texte/HTML peut être généré via jQuery (comme dans l'exemple ci-dessus), ou via du code JavaScript et des éléments DOM.
after() et before()
la méthode jQuery after() insère du contenu après l'élément sélectionné.
La méthode jQuery before() insère le contenu avant l'élément sélectionné.
<!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>Les méthodes after() et before() sont capables de recevoir un nombre illimité de nouveaux éléments via des paramètres. De nouveaux éléments peuvent être créés via texte/HTML, jQuery ou JavaScript/DOM.
section suivante