Crear elementos en jQuery
- Crear elementos en jQuery
-
Use el método
append()para crear elementos en jQuery -
Usa el método
prepend()para crear elementos en jQuery -
Usa los métodos
after()ybefore()para crear elementos en jQuery
El createElement() es un método del núcleo de JavaScript para crear un elemento HTML. En jQuery, existen algunos métodos para realizar una operación similar.
Este tutorial demuestra cómo crear un elemento HTML en jQuery.
Crear elementos en jQuery
Hay cuatro métodos en jQuery para crear elementos HTML:
append(): este método agregará el elemento al final de los elementos seleccionados.prepend(): este método agregará el elemento al principio de los elementos seleccionados.after(): este método agregará el elemento después de los elementos seleccionados.before()- Este método agregará el elemento antes de los elementos seleccionados.
Analicemos y probemos un ejemplo para cada método.
Use el método append() para crear elementos en jQuery
El método append() añade el elemento al final del elemento seleccionado. La sintaxis es simple para agregar un elemento HTML.
Ver ejemplo:
<!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>
El código anterior agregará un solo elemento de párrafo HTML a la vez. Ver salida:
También podemos crear múltiples elementos usando el método append(). Ver ejemplo:
<!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>
El código anterior creará tres nuevos párrafos utilizando el método append(). Ver salida:
Usa el método prepend() para crear elementos en jQuery
El método prepend() añade el elemento al principio del elemento seleccionado. La sintaxis es simple para un elemento HTML.
Ver ejemplo:
<!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>
El código agregará un párrafo antes del párrafo dos. Ver salida:
Del mismo modo, anteponemos varios elementos. Ver ejemplo:
<!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>
El código anterior creará múltiples elementos antes del elemento dado. Ver salida:
Usa los métodos after() y before() para crear elementos en jQuery
El método after() creará un elemento después del elemento dado y, de manera similar, el método before() creará un elemento antes del elemento dado.
Vea el ejemplo de ambos métodos a continuación:
<!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>
El código anterior creará los elementos antes y después del elemento dado. Ver salida:
Del mismo modo, podemos crear múltiples elementos con los métodos after() y before(). Ver ejemplo:
<!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>
El código anterior agregará múltiples elementos antes y después del elemento dado. Ver salida:
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