estoy tratando de crear un nuevo div que contiene un botón y una entrada dentro
Traté de usar .prepend() pero solo puede crear el div y no puedo crear el botón y la entrada incluso cuando uso .appendChild() siempre recibo un error
var secondContainer = $(".second-container"); $("#adding-btn").click(function(){ secondContainer.prepend("<div class ='dwn-section'></div>"); $("div .dwn-section").appendChild("input"); }) <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>to do list</title> <link rel="stylesheet" href="index.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Akaya+Telivigala&family=Kufam&display=swap" rel="stylesheet"> </head> <body> <h1 class="my">My to do list</h1> <div class="container"> <div class="top-section"> <input id="inputField" class="inpt" type="text" name="" value=""> <button id="adding-btn" class="btn btn-info" type="button" name="button">+</button> </div> <div class="second-container"> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="index.js" charset="utf-8"></script> </body> </html>El problema aquí, $("div .dwn-section") esta declaración no es válida. Como es un elemento de obtención por nombre de clase, será una matriz, por lo que debe especificar el índice como $('.dwn-section')[0]
Pero al mismo tiempo, si estamos usando un campo de ID específico para obtener el div, podemos usar directamente $("#dwn-section") .
$("#adding-btn").click(function(){ secondContainer.prepend("<div class ='dwn-section' ></div>"); $('<input>').appendTo($('.dwn-section')[0]); })En primer lugar, el método jQuery para agregar contenido es append() no appendChild() .
También tenga en cuenta que cuando intenta crear contenido HTML nuevo usando jQuery, debe incluir la cadena HTML completa, no solo un nombre de etiqueta.
Por último, supongo que la nueva input que cree debe contener el valor que se escribió en el original, y que la entrada anterior debe borrarse. Para hacer eso, establezca el atributo de value en la cadena HTML para la nueva entrada y use val('') para borrar el original:
let $secondContainer = $(".second-container"); let $inputField = $('#inputField'); $("#adding-btn").click(function() { let $section = $('<div class="dwn-section"></div>'); $section.append(`<input type="text" value="${$inputField.val()}" readonly />`); $secondContainer.prepend($section); $inputField.val(''); }) <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Akaya+Telivigala&family=Kufam&display=swap" rel="stylesheet"> <h1 class="my">My to do list</h1> <div class="container"> <div class="top-section"> <input id="inputField" class="inpt" type="text" name="" value=""> <button id="adding-btn" class="btn btn-info" type="button" name="button">+</button> </div> <div class="second-container"></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Solo usa agregar ()
var secondContainer = $(".second-container"); $("#adding-btn").click(function(){ secondContainer.prepend("<div class ='dwn-section'></div>"); $("div .dwn-section").append("<input/>"); }) <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>to do list</title> <link rel="stylesheet" href="index.css"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Akaya+Telivigala&family=Kufam&display=swap" rel="stylesheet"> </head> <body> <h1 class="my">My to do list</h1> <div class="container"> <div class="top-section"> <input id="inputField" class="inpt" type="text" name="" value=""> <button id="adding-btn" class="btn btn-info" type="button" name="button">+</button> </div> <div class="second-container"> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="index.js" charset="utf-8"></script> </body> </html>