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>追加列表项</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é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中文网(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>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中文网(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 标签创建文本
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é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 grâce à la méthode after() (valable également pour before()) :
<!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>
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="/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
section suivante