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 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>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("<div class ='dwn-section' ></div>");
$('<input>').appendTo($('.dwn-section')[0]);
})
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 = $('<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>Just use append()
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>