如何将一个新元素添加到另一个 JS 中
[英]how to add a new element into another one JS
问题描述
我一直在尝试在里面创建一个 td 和一些 tr，将它们全部放在一个 tbody 中，在 html 中，id 为 user_information 我，到目前为止已经这样做了，但它不起作用。
我可以正确地显示信息，但不能将元素放在表体中
如何在 js 之前、之后和内部添加新元素？
谢谢你的帮助
var ccc = document.createElement("tr");
ccc.innerHTML = "<td>"+ all_users[0].new_user_name_val + "</td>" + "<td>"+
all_users[0].new_user_lastname_val + "</td>" + "<td>"+ all_users[0].new_user_email_val + "</td>" + " <td>"+ all_users[0].new_user_phone_val + "</td>" ;
document.body.appendChild(ccc);
var currentDiv = document.getElementById("user_information");
currentDiv.innerHTML = ccc
var new_user_name = document.querySelector("#new_user_name"); var new_user_lastname = document.querySelector("#new_user_lastname"); var new_user_email = document.querySelector("#new_user_email"); var new_user_phone = document.querySelector("#new_user_phone"); var new_user_btn = document.querySelector("#new_user_btn"); var signed_user = document.querySelector(".signed_user"); new_user_btn.addEventListener("click", function(){ var new_user_name_val = new_user_name.value; var new_user_lastname_val = new_user_lastname.value; var new_user_email_val = new_user_email.value; var new_user_phone_val = new_user_phone.value; if(new_user_name_val !== "" && new_user_lastname_val !== "" && new_user_email_val !== "" && new_user_phone_val !== ""){ var all_users = []; class users { constructor(new_user_name_val, new_user_lastname_val, new_user_email_val, new_user_phone_val){ this.new_user_name_val = new_user_name_val; this.new_user_lastname_val = new_user_lastname_val; this.new_user_email_val = new_user_email_val; this.new_user_phone_val = new_user_phone_val; } } var sign_new_user = new users (new_user_name_val, new_user_lastname_val, new_user_email_val, new_user_phone_val); all_users.push(sign_new_user); var ccc = document.createElement("tr"); ccc.innerHTML = "<td>"+ all_users[0].new_user_name_val + "</td>" + "<td>"+ all_users[0].new_user_lastname_val + "</td>" + "<td>"+ all_users[0].new_user_email_val + "</td>" + "<td>"+ all_users[0].new_user_phone_val + "</td>" ; document.body.appendChild(ccc); var currentDiv = document.getElementById("user_information"); currentDiv.innerHTML = ccc // signed_user.innerHTML = "<td>"+ all_users[0].new_user_name_val + "</td>" + "<td>"+ all_users[0].new_user_lastname_val + "</td>" + "<td>"+ all_users[0].new_user_email_val + "</td>" + "<td>"+ all_users[0].new_user_phone_val + "</td>"; } new_user_name_val = new_user_name.value = ""; new_user_lastname_val = new_user_lastname.value = ""; new_user_email_val = new_user_email.value = ""; new_user_phone_val = new_user_phone.value = ""; });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="users.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lykmapipo/themify-icons@0.1.2/css/themify-icons.css"> <title>Document</title> </head> <title>Document</title> </head> <body> <section class="new_user pt-5"> <div class="container"> <div class="row"> <div class="col-12"> <!-- nombre, apellido email telefono --> <form id="rrr"> <div class="form-group"> <label for="exampleInputEmail1">New User Name</label> <input type="text" class="form-control main_user_info" id ="new_user_name" aria-describedby="emailHelp"> </div> <div class="form-group"> <label for="exampleInputPassword1">New User Last Name</label> <input type="text" class="form-control main_user_info" main_user_info id="new_user_lastname"> </div> <div class="form-group"> <label for="exampleInputPassword1">New User Email</label> <input type="email" class="form-control main_user_info" id="new_user_email"> </div> <div class="form-group"> <label for="exampleInputPassword1">New User Phone Number</label> <input type="number" class="form-control main_user_info" id="new_user_phone"> </div> <button id="new_user_btn" type="button" class="btn btn-primary">Submit</button> </form> </div> </div> </div> </section> <section class="user_info_table pt-5"> <div class="container"> <div class="row"> <div class="col-12"> <table class="table table-bordered"> <thead> <tr> <th class="text-center" scope="col">Name</th> <th class="text-center" scope="col">Last name</th> <th class="text-center" scope="col">Email</th> <th class="text-center" scope="col">Phone Nnumber</th> </tr> </thead> <tbody id="user_information"> </tbody> </table> </div> </div> </div> </section> <script src="users.js"></script> </body> </html>
2 个解决方案
解决方案1
2 已采纳 2020-03-08 04:06:29
你在正确的轨道上。 但是你需要附加你创建的孩子而不是使用innerHTML：
代替
currentDiv.innerHTML = ccc
到
currentDiv.appendChild(ccc)
var new_user_name = document.querySelector("#new_user_name"); var new_user_lastname = document.querySelector("#new_user_lastname"); var new_user_email = document.querySelector("#new_user_email"); var new_user_phone = document.querySelector("#new_user_phone"); var new_user_btn = document.querySelector("#new_user_btn"); var signed_user = document.querySelector(".signed_user"); new_user_btn.addEventListener("click", function() { var new_user_name_val = new_user_name.value; var new_user_lastname_val = new_user_lastname.value; var new_user_email_val = new_user_email.value; var new_user_phone_val = new_user_phone.value; if (new_user_name_val !== "" && new_user_lastname_val !== "" && new_user_email_val !== "" && new_user_phone_val !== "") { var all_users = []; class users { constructor(new_user_name_val, new_user_lastname_val, new_user_email_val, new_user_phone_val) { this.new_user_name_val = new_user_name_val; this.new_user_lastname_val = new_user_lastname_val; this.new_user_email_val = new_user_email_val; this.new_user_phone_val = new_user_phone_val; } } var sign_new_user = new users(new_user_name_val, new_user_lastname_val, new_user_email_val, new_user_phone_val); all_users.push(sign_new_user); var ccc = document.createElement("tr"); ccc.innerHTML = "<td>" + all_users[0].new_user_name_val + "</td>" + "<td>" + all_users[0].new_user_lastname_val + "</td>" + "<td>" + all_users[0].new_user_email_val + "</td>" + "<td>" + all_users[0].new_user_phone_val + "</td>"; document.body.appendChild(ccc); var currentDiv = document.getElementById("user_information"); currentDiv.appendChild(ccc); // signed_user.innerHTML = "<td>"+ all_users[0].new_user_name_val + "</td>" + "<td>"+ all_users[0].new_user_lastname_val + "</td>" + "<td>"+ all_users[0].new_user_email_val + "</td>" + "<td>"+ all_users[0].new_user_phone_val + "</td>"; } new_user_name_val = new_user_name.value = ""; new_user_lastname_val = new_user_lastname.value = ""; new_user_email_val = new_user_email.value = ""; new_user_phone_val = new_user_phone.value = ""; });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="users.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lykmapipo/themify-icons@0.1.2/css/themify-icons.css"> <title>Document</title> </head> <title>Document</title> </head> <body> <section class="new_user pt-5"> <div class="container"> <div class="row"> <div class="col-12"> <!-- nombre, apellido email telefono --> <form id="rrr"> <div class="form-group"> <label for="exampleInputEmail1">New User Name</label> <input type="text" class="form-control main_user_info" id="new_user_name" aria-describedby="emailHelp"> </div> <div class="form-group"> <label for="exampleInputPassword1">New User Last Name</label> <input type="text" class="form-control main_user_info" main_user_info id="new_user_lastname"> </div> <div class="form-group"> <label for="exampleInputPassword1">New User Email</label> <input type="email" class="form-control main_user_info" id="new_user_email"> </div> <div class="form-group"> <label for="exampleInputPassword1">New User Phone Number</label> <input type="number" class="form-control main_user_info" id="new_user_phone"> </div> <button id="new_user_btn" type="button" class="btn btn-primary">Submit</button> </form> </div> </div> </div> </section> <section class="user_info_table pt-5"> <div class="container"> <div class="row"> <div class="col-12"> <table class="table table-bordered"> <thead> <tr> <th class="text-center" scope="col">Name</th> <th class="text-center" scope="col">Last name</th> <th class="text-center" scope="col">Email</th> <th class="text-center" scope="col">Phone Nnumber</th> </tr> </thead> <tbody id="user_information"> </tbody> </table> </div> </div> </div> </section> <script src="users.js"></script> </body> </html>
解决方案2
1 2020-03-08 04:19:53
为了向您使用的现有元素添加一些内容
element.html('myText');
如何将新字段添加到对象数组，或将值从一个数组插入到另一个数组-JS
[英]How to add new fields to an Array of Objects, or insert values from one array to another - JS
如何在 javascript 中的另一个元素之后添加一个 HTML 元素？
[英]How can I add an HTML element after another one in javascript?
如何使用JavaScript在指向另一个元素的多个位置向JSON对象添加新元素？
[英]How do I add new element to JSON object in multiple places referring to an another element using JavaScript?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.