Trying to add a Div inside another Div inside another Div with JavaScript

Question

I am not sure this is the best way to proceed but I am trying to dynamically create new parts of a form, depending on how much the user needs.

This is my HTML:

<div class="col-auto" id="nameEntries">
  <div class="input-group mb-2">
    <div class="input-group-prepend">
      <div class="input-group-text">Nom</div>
    </div>
    <input type="text" class="form-control" name="entrees[nom]">
  </div>
</div>
<a href="#" onclick="addFields()">Ajouter une entrée d'argent</a>

I am trying to display this section again dynamically when the user presses the link. Here is the JS

function addFields() {
  //creating the divs
  var colDiv = document.createElement("div");
  colDiv.class = "col-auto";
  var inputGroupName = document.createElement("div");
  inputGroupName.class = "input-group mb-2";
  var inputGroupPrepend = document.createElement("div");
  inputGroupPrepend.class = "input-group-prepend";
  var inputGroupText = document.createElement("div");
  inputGroupText.class = "input-group-text";
  var nameNode = document.createTextNode("Name");
  var nameInput = document.createElement("input");
  nameInput.type = "text";
  nameInput.class = "form-control";
  nameInput.name = "entrees" + i + "[name]";
  nameInput.placeholder = "...";
  //appending them to each other

  inputGroupText.appendChild(nameNode);
  inputGroupPrepend.appendChild(inputGroupText);
  inputGroupName.appendChild(inputGroupPrepend);
  inputGroupName.appendChild(nameInput);
  colDiv.appendChild(inputGroupName);
  document.getElementById('nameEntries').appendChild(colDiv);
}

I added a picture of what the page looks like. When the user presses "Ajouter une entrée d'argent", another section identical as where the fields are should appear right below.
Link here

Answer 1

 function addFields() { var wrapper = $('.wrapper'); // this is the HTML generated to append to the wrapper div. Don't use the id. You can use data-attributes to identify the columns. Or if you've something unique then you can use that as ID. var outerDiv = $('<div/>').addClass('col-auto').append( $('<div/>').addClass('input-group mb-2').append( $('<div/>').addClass('input-group-prepend').append( $('<div/>').addClass('input-group-text').html('Nom') ) ).append( $('<input/>').attr({ 'type': 'text', 'name': 'name' }).addClass('form-control') ) ); wrapper.append(outerDiv); } $(document).ready(function() { $('#rowAdder').on('click', addFields); addFields(); });

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class=wrapper> <!-- Your all the div elements will be added here. --> </div> <a href="#" id="rowAdder">Ajouter une entrée d'argent</a> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> </body> </html>

Answer 2

您可以使用cloneNode(true)方法来重现现有的HTML结构：

xyz.appendChild(abc.cloneNode(true))

Answer 3

var e = document.getElementById('child');
document.getElementById('parent').appendChild(e);

Trying to add a Div inside another Div inside another Div with JavaScript

Question

3 answers

solution1
1 2018-12-07 07:19:52

solution2
0 2018-12-07 06:33:15

solution3
0 2018-12-07 07:41:43

Trying to add a Div inside another Div inside another Div with JavaScript

Question

3 answers

solution1 1 2018-12-07 07:19:52

solution2 0 2018-12-07 06:33:15

solution3 0 2018-12-07 07:41:43

solution1
1 2018-12-07 07:19:52

solution2
0 2018-12-07 06:33:15

solution3
0 2018-12-07 07:41:43