create div contains input and button inside a main div on click

Question

i'm trying to create a new div contains a button and an input inside

i tried to use .prepend() but it can only creates the div and i can't creat the button and the input even when i use .appendChild() allways i get error

var secondContainer = $(".second-container");


$("#adding-btn").click(function(){
  secondContainer.prepend("");
  $("div .dwn-section").appendChild("input");
})





  
  to do list
  
  
  
  
  



  My to do list

user_6270897 · Answer

The problem here, $("div .dwn-section") this statement is not valid. As it is a get element by class name it will be an array, so you should specifiy the index like $('.dwn-section')[0]

But at the same time if we are using any specific ID field to get the div then we can directly use $("#dwn-section").

$("#adding-btn").click(function(){
  secondContainer.prepend("");
  $('').appendTo($('.dwn-section')[0]);
})

user_519413 · Answer

Firstly the jQuery method to append content is append() not appendChild().

Also note that when you're trying to create new HTML content using jQuery you need to include the entire HTML string, not just a tag name.

Lastly, I'm assuming that the new input you create should contain the value which was typed in to the original, and that the old input should be cleared. To do that set the value attribute in the HTML string for the new input, and use val('') to clear the original one:

let $secondContainer = $(".second-container");
let $inputField = $('#inputField');

$("#adding-btn").click(function() {
  let $section = $('');
  $section.append(``);
  $secondContainer.prepend($section);
  $inputField.val('');
})






My to do list

user_401278 · Answer

Just use append()

var secondContainer = $(".second-container");


$("#adding-btn").click(function(){
  secondContainer.prepend("");
  $("div .dwn-section").append("");
})





  
  to do list
  
  
  
  
  



  My to do list

create div contains input and button inside a main div on click

3 Answers