Créer des éléments dans jQuery
- Créer des éléments dans jQuery
-
Utilisez la méthode
append()pour créer des éléments dans jQuery -
Utilisez la méthode
prepend()pour créer des éléments dans jQuery -
Utilisez les méthodes
after()etbefore()pour créer des éléments dans jQuery
Le createElement() est une méthode du noyau JavaScript pour créer un élément HTML. Dans jQuery, il existe quelques méthodes pour effectuer une opération similaire.
Ce tutoriel montre comment créer un élément HTML dans jQuery.
Créer des éléments dans jQuery
Il existe quatre méthodes dans jQuery pour créer des éléments HTML :
append()- Cette méthode ajoutera l’élément à la fin des éléments sélectionnés.prepend()- Cette méthode ajoutera l’élément au début des éléments sélectionnés.after()- Cette méthode ajoutera l’élément après les éléments sélectionnés.before()- Cette méthode ajoutera l’élément avant les éléments sélectionnés.
Discutons et essayons un exemple pour chaque méthode.
Utilisez la méthode append() pour créer des éléments dans jQuery
La méthode append() ajoute l’élément à la fin de l’élément sélectionné. La syntaxe est simple pour ajouter un élément HTML.
Voir exemple :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#DemoButton").click(function(){
$("#two").append(" <p> This is paragraph three </p>");
});
});
</script>
</head>
<body>
<p>This is paragraph One.</p>
<p id="two">This is paragraph two.</p>
<button id="DemoButton">Append paragraph</button>
</body>
</html>
Le code ci-dessus ajoutera un seul élément de paragraphe HTML à la fois. Voir la sortie :
Nous pouvons également créer plusieurs éléments en utilisant la méthode append(). Voir exemple :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function append_paragraphs() {
var ELement1 = "<p>This is a paragraph two. </p>"; // paragraph with HTML
var ELement2 = $("<p></p>").text("This is a paragraph three."); // paragraph with jQuery
var ELement3 = document.createElement("p");
ELement3.innerHTML = "This is a paragraph four"; // paragraph with DOM
$("body").append(ELement1, ELement2, ELement3); // Append all paragraph elements
}
</script>
</head>
<body>
<p>This is a paragraph one.</p>
<button onclick="append_paragraphs()">Append Paragraphs</button>
</body>
</html>
Le code ci-dessus créera trois nouveaux paragraphes en utilisant la méthode append(). Voir la sortie :
Utilisez la méthode prepend() pour créer des éléments dans jQuery
La méthode prepend() ajoute l’élément au début de l’élément sélectionné. La syntaxe est simple pour un élément HTML.
Voir exemple :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#DemoButton").click(function(){
$("#two").prepend(" <p> This is the new paragraph</p>");
});
});
</script>
</head>
<body>
<p>This is paragraph One.</p>
<p id="two">This is paragraph two.</p>
<button id="DemoButton">Append paragraph</button>
</body>
</html>
Le code ajoutera un paragraphe avant le deuxième paragraphe. Voir la sortie :
De même, nous préajoutons plusieurs éléments. Voir exemple :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function Prepend_paragraphs() {
var ELement1 = "<p>This is a paragraph one. </p>"; // paragraph with HTML
var ELement2 = $("<p></p>").text("This is a paragraph two."); // paragraph with jQuery
var ELement3 = document.createElement("p");
ELement3.innerHTML = "This is a paragraph three"; // paragraph with DOM
$("body").prepend(ELement1, ELement2, ELement3); // Prepend all paragraph elements
}
</script>
</head>
<body>
<p>This is a the last paragraph.</p>
<button onclick="Prepend_paragraphs()">Prepend Paragraphs</button>
</body>
</html>
Le code ci-dessus créera plusieurs éléments avant l’élément donné. Voir la sortie :
Utilisez les méthodes after() et before() pour créer des éléments dans jQuery
La méthode after() créera un élément après l’élément donné, et de même, la méthode before() créera un élément avant l’élément donné.
Voir l’exemple pour les deux méthodes ci-dessous :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button1").click(function(){
$("h1").before("<b> Element Before </b>");
});
$("#button2").click(function(){
$("h1").after("<b> Element After </b>");
});
});
</script>
</head>
<body>
<h1>Delfstack</h1>
<br><br>
<button id="button1">Insert element before</button>
<button id="button2">Insert element after</button>
</body>
</html>
Le code ci-dessus créera les éléments avant et après l’élément donné. Voir la sortie :
De même, nous pouvons créer plusieurs éléments avec les méthodes after() et before(). Voir exemple :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
function After_Element() {
var Element1 = "<b>This </b>"; // element with HTML
var Element2 = $("<b></b>").text("is "); //with jQuery
var Element3 = document.createElement("b"); // with DOM
Element3.innerHTML = "Delftstack.com.";
$("h1").after(Element1, Element2, Element3); // Insert new elements after h1
}
function Before_Element() {
var Element1 = "<b>This </b>"; // element with HTML
var Element2 = $("<b></b>").text("is "); //with jQuery
var Element3 = document.createElement("b"); // with DOM
Element3.innerHTML = "Delftstack.com.";
$("h1").before(Element1, Element2, Element3); // Insert new elements before h1
}
</script>
</head>
<body>
<h1>Delfstack</h1>
<br><br>
<p>Create Elements after the h1.</p>
<button onclick="After_Element()">Insert after</button>
<p>Create Elements before the h1.</p>
<button onclick="Before_Element()">Insert before</button>
</body>
</html>
Le code ci-dessus ajoutera plusieurs éléments avant et après l’élément donné. Voir la sortie :
Sheeraz is a Doctorate fellow in Computer Science at Northwestern Polytechnical University, Xian, China. He has 7 years of Software Development experience in AI, Web, Database, and Desktop technologies. He writes tutorials in Java, PHP, Python, GoLang, R, etc., to help beginners learn the field of Computer Science.
LinkedIn Facebook