jQuery ajoutant des éléments
Avec jQuery, il est facile d’ajouter de nouveaux éléments/contenus.
Ajout d'un nouveau contenu HTML
Nous apprendrons 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é
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>追加列表項(xiàng)</li>");
});
});
</script>
</head>
<body>
<p>這是一個(gè)段落。</p>
<p>這是另外一個(gè)段落。</p>
<ol>
<li>列表項(xiàng) 1</li>
<li>列表項(xiàng) 2</li>
<li>列表項(xiàng) 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表項(xiàng)</button>
</body>
</html>Exécutez le programme pour l'essayer
jQuery prepend( )
La méthode jQuery prepend() insère du contenu au début de l'élément sélectionné.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(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>在開頭添加列表項(xiàng)</li>");
});
});
</script>
</head>
<body>
<p>這是一個(gè)段落。</p>
<p>這是另外一個(gè)段落。</p>
<ol>
<li>列表 1</li>
<li>列表 2</li>
<li>列表 3</li>
</ol>
<button id="btn1">添加文本</button>
<button id="btn2">添加列表項(xiàng)</button>
</body>
</html>Exécutez le programme pour l'essayer
Par ajout () et La méthode prepend() ajoute plusieurs nouveaux éléments
Dans l'exemple ci-dessus, nous insérons uniquement du texte/HTML au début/fin des éléments sélectionnés.
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>php中文網(wǎng)(php.cn)</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 標(biāo)簽創(chuàng)建文本
var txt2=$("<p></p>").text("文本。"); // 使用 jQuery 創(chuàng)建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本。"; // 使用 DOM 創(chuàng)建文本 text with DOM
$("body").append(txt1,txt2,txt3); // 追加新元素
}
</script>
</head>
<body>
<p>這是一個(gè)段落。</p>
<button onclick="appendText()">追加文本</button>
</body>
</html>Exécutez le programme et essayez-le
Méthodes jQuery 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é.
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="/upload/course/000/000/006/580b170b612ba140.jpg" height="150" width="150">
<br><br>
<button id="btn1">之前插入</button>
<button id="btn2">之后插入</button>
</body>
</html>Exécutez le programme pour l'essayer
Par après () et La méthode before() ajoute plusieurs nouveaux éléments
Les méthodes after() et before() peuvent 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.
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, nous insérons ces nouveaux éléments dans le texte grace à la méthode after() (valable également pour before())?:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
function afterText(){
var txt1="<b>I </b>"; // 使用 HTML 創(chuàng)建元素
var txt2=$("<i></i>").text("love "); // 使用 jQuery 創(chuàng)建元素
var txt3=document.createElement("big"); // 使用 DOM 創(chuàng)建元素
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // 在圖片后添加文本
}
</script>
</head>
<body>
<img src="/upload/course/000/000/006/580b170b612ba140.jpg" height="150" width="150">
<br><br>
<button onclick="afterText()">之后插入</button>
</body>
</html>Exécutez le programme et essayez-le
