jQuery - Ajouter des éléments
jQuery - Ajout d'éléments
Avec jQuery, il est facile d'ajouter de nouveaux éléments/contenus.
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é
après( ) - Insérer du contenu après l'élément sélectionné
before() - Insérer du contenu avant l'élément sélectionné
Méthode jQuery append()
La méthode jQuery append() insère du contenu à la fin de l'élément sélectionné.
Instance
<!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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Méthode jQuery prepend()
jQuery prepend( ) dans Insérer du contenu au début de l’élément sélectionné.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Ajouter plusieurs nouveaux éléments via les méthodes append() et prepend()
Dans l'exemple ci-dessus, nous insérons uniquement du texte/HTML au début/fin de l'élément sélectionné.
Cependant, les méthodes append() et prepend() peuvent 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.
Dans l'exemple suivant, nous créons plusieurs nouveaux éléments. Ces éléments peuvent être créés en utilisant texte/HTML, jQuery ou JavaScript/DOM. On ajoute ensuite ces nouveaux éléments au texte via la méthode append() (valable également pour prepend()) :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
function appendText(){
var txt1="<p>文本。</p>"; // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 创建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
}
</script>
</head>
<body>
<p>这是一个段落。</p>
<button onclick="appendText()">追加文本</button>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Méthodes jQuery after() et before()
La méthode jQuery after() insère le contenu après l'élément sélectionné.
La méthode jQuery before() insère le contenu avant l'élément sélectionné.
Instance
<!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(){
$("img").before("<b>之前</b>");
});
$("#btn2").click(function(){
$("img").after("<i>之后</i>");
});
});
</script>
</head>
<body>
<img src="/images/logo.png" >
<br><br>
<button id="btn1">之前插入</button>
<button id="btn2">之后插入</button>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Ajouter plusieurs nouveaux éléments via les méthodes after() et before()
Les méthodes after() et before() peuvent recevoir un nombre illimité de nouveaux éléments à travers des paramètres. De nouveaux éléments peuvent être créés via texte/HTML, jQuery ou JavaScript/DOM.
Dans l'exemple suivant, nous créons plusieurs nouveaux éléments. Ces éléments peuvent être créés en utilisant texte/HTML, jQuery ou JavaScript/DOM. Ensuite on insère ces nouveaux éléments dans le texte grâce à la méthode after() (valable également pour before()) :
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
function afterText(){
var txt1="<b>I </b>"; // 使用 HTML 创建元素
var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素
var txt3=document.createElement("big"); // 使用 DOM 创建元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在图片后添加文本
}
</script>
</head>
<body>
<img src="/images/logo.png" >
<br><br>
<button onclick="afterText()">之后插入</button>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
