jQuery - Ajouter des éléments

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.

Formation continue

nouveau fichier

<!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>

soumettre Réinitialiser le code

Opération automatique

jQuery - Ajouter des éléments

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]