[英]Trying to add a Div inside another Div inside another Div with JavaScript
我不確定這是最好的方法，但是我正在嘗試根據用戶的需求動態創建表單的新部分。
這是我的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>
我試圖在用戶按下鏈接時再次動態顯示此部分。 這是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);
}
我添加了頁面外觀的圖片。 當用戶按下“ Ajouter uneentréd'argent”時，與字段所在位置相同的另一部分應出現在下方。
連結這里
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>
您可以使用cloneNode(true)方法來重現現有的HTML結構：
xyz.appendChild(abc.cloneNode(true))
var e = document.getElementById('child');
document.getElementById('parent').appendChild(e);
如何在JavaScript中使用“ this”在懸停的div中添加另一個子div
[英]How to use “this” in javascript to add another child div inside a hovered div
JavaScript：嘗試使用另一個DIV的DIV中加載的頁面中的變量
[英]JavaScript: Trying to use a variable from a page loaded inside a DIV in another DIV
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.