Aquí usamos HTML, CSS, JavaScript, jQuery y Bootstrap básicos para construir este pequeño proyecto de ejemplo. jQuery es la biblioteca de código abierto que simplifica la creación y la navegación de la aplicación web. Vamos a utilizar tres métodos jQuery como clone(), append() y attr() para resolver este ejemplo.
El método clone() hace una copia del elemento seleccionado
método attr() para cambiar el nombre del atributo como id, clase, etc.
El método append() es para agregar el último elemento secundario de cada elemento en la colección jQuery
Aquí vamos a clonar la tarjeta de arranque que tiene una identificación llamada ‘cloneme’ y tiene etiquetas secundarias como ‘<b>’, ‘<button>’, ‘<p>’.
Pasos:-
- Cuando el usuario presiona el botón «hacer clic en mí» en la sección de la interfaz de usuario de la página web, se ejecutará en la devolución de llamada del oyente de clics.
- Dentro de esta función de devolución de llamada, simplemente hacemos una copia de la etiqueta HTML con id ‘cloneme’. También puede tomar una etiqueta HTML con una clase de atributo.
- Después de clonar el código Html, vamos a cambiar la ID de la etiqueta secundaria de <b> y la etiqueta <button> encontrando la etiqueta usando su nombre de atributo, como id, clase.
- Después de encontrar la etiqueta usando su nombre de atributo, vamos a cambiar su nombre de atributo por el método jQuery attr().
- Adjunte el código HTML clonado al destino.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity=
"sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous">
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width">
<title>geeksforgeeks</title>
</head>
<body>
<h1 style="margin-top:10px;color:green;text-align:center;">
GeeksForGeeks
</h1>
<button type="button"
class="btn btn-success"
id="clickme"
style="display: block;
margin-left: auto;
margin-right: auto;
justify-content: center;">Click Me</button>
<hr style="color:green; border: 2px solid">
<div id="cloneme"
style="margin-left:10px;display:none;
margin-top:10px;">
<div class="card" style="width: 18rem;">
<img class="card-img-top"
src=
"https://media.geeksforgeeks.org/wp-content/uploads/20210117221201/download9.png"
alt="GeeksForGeeks">
<div class="card-body">
<p class="card-text" style="text-align:center;">
<b id="setID">My Id is 0</b></p>
<p>
GeeksforGeeks.org was created with a goal
in mind to provide well written, well
thought and well explained solutions
for selected questions. The core team
of five super geeks constituting of
technology lovers and computer science
enthusiasts have been
constantly working in this direction.
</p>
<button type="button"
id="cancel"
class="btn btn-success"
style="justify-content:center;margin-left:auto;
margin-right:auto;">
Cancel
</button>
</div>
</div>
</div>
<div id="bucket" class="container-fluid">
<div>
<script src="script.js"></script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script>
let c = 0
function IDgenerate() {
return c++
}
$("#clickme").on("click", function() {
var cn = IDgenerate();
//clone the html code
let clone = $("#cloneme").clone()
//change the css of parent
clone.css("display", "inline-block")
//change the id attribute of child tag '<b>'
clone.find('#setID').attr("id", cn)
//change the text inside the child tag '<b>'
clone.find("#" + cn).text("My ID is " + cn)
//change the id attribute of child tag '<button>'
clone.find("#cancel").attr("id", "cancel" + cn)
//add on click listener to the cancel button
clone.find("#cancel" + cn).on("click", function() {
clone.css("display", "none")
})
// append the clone to the destination
$("#bucket").append(clone)
})
</script>
</body>
</html>
modelo de trabajo del proyecto
Publicación traducida automáticamente
Artículo escrito por debadebaduttapanda7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA