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

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/[email protected]/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 >My to do list</h1>
  <div >
    <div >
      <input id="inputField"  type="text" name="" value="">
      <button id="adding-btn"  type="button" name="button"> </button>
    </div>
    <div >

    </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>

CodePudding user response：

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]);
})

CodePudding user response：

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 ></div>');
  $section.append(`<input type="text" value="${$inputField.val()}" readonly />`);
  $secondContainer.prepend($section);
  $inputField.val('');
})

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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 >My to do list</h1>
<div >
  <div >
    <input id="inputField"  type="text" name="" value="">
    <button id="adding-btn"  type="button" name="button"> </button>
  </div>
  <div ></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

CodePudding user response：

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/[email protected]/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 >My to do list</h1>
  <div >
    <div >
      <input id="inputField"  type="text" name="" value="">
      <button id="adding-btn"  type="button" name="button"> </button>
    </div>
    <div >

    </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>