堆栈内存溢出
  繁体   English   中英

我如何使用 javascript 在正确的位置创建 html

[英]how do i make create html in the right place using javascript

 原文  2021-11-21 13:04:37  7   2    javascript/ html/ css/ bootstrap-modal

问题描述

我试图使用 javascript 创建 HTML 元素，我设法创建了它们，但它们出现在错误的位置。 我也在使用引导程序。

我现在卡住的问题是如何在我的页面的特定位置创建 html 元素。

在这种情况下，在我的模态体 div-> 容器流体 div-> 新行 div 

 let a = 1; //function to create text area and date picker with unique id function create() { let input = document.createElement("input"); input.setAttribute('type', 'text'); input.setAttribute('class', 'form-control'); input.setAttribute("id", "txt" + a); let pickdate = document.createElement("input"); pickdate.setAttribute('type', 'date'); pickdate.setAttribute("id", "pickdate" + a); document.body.appendChild(pickdate); document.body.appendChild(input); a++; }
 .col-md-11 { background-color: yellow; text-align: right; border: 2px solid white; }.col-md-2 { background-color: lightblue; text-align: right; border: 2px solid white; }.col-md-8 { background-color: pink; }.col-md-4 { background-color: orange; text-align: center; border: 2px solid white; }.col-md-1 { background-color: violet; align: left; }.col-md-5 { background-color: grey; align: left; }.col-md-3 { background-color: yellow; align: left; }.col-md-10 { background-color: grey; }
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <body> <div class="container mt-5"> <div class="row"> <div class="col-md-2"> <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">Add New Record</button> </div> <div class="col-md-8"> <input class="form-control input-sm" type="text"> </div> <div class="col-md-1"> <select name="sort" id="sort"> <option value="" disabled selected>choose</option> <option>Date Filed</option> <option>Name</option> <option>Purpose</option> <option>Status</option> </select> </div> <div class="col-md-1"> <button class="btn btn-primary">Search</button> </div> </div> <div class="row mt-3"> <div class="col-md-10">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat, iusto?</div> <div id="actions" class="col-md-2"> <button id="editbtn" class="btn btn-success">Edit</button> <button id="delbtn" class="btn btn-danger" onclick="delwarning()">Delete</button> </div> </div> </div> <;-- Modal start--> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times:</button> <h4 class="modal-title">Add new Record</h4> </div> <div class="modal-body"> <div class="container-fluid"> <div class="row"> <div class="col-md-1"><label for="name">Name:</label></div> <div class="col-md-11"><input class="form-control input-lg" type="text"></div> </div> <div class="row"> <div class="col-md-1"><label for="name">Purpose:</label></div> <div class="col-md-11"><input class="form-control input-lg" type="text"></div> </div> <div class="row"> <div class="col-md-1"><label for="name">Date:</label></div> <div class="col-md-3"><input class="form-control input-lg" type="date"></div> <div class="col-md-2"><label for="name">Destination/s:</label></div> <div class="col-md-5"><input class="form-control input-lg" type="text"></div> <div class="col-md-1"><button id="addmore" class="btn btn-success" onclick="create()">more</button></div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </body>

2 个解决方案

解决方案1
 0 已采纳  2021-11-21 13:11:40

您将元素附加到正文，而不是获取模态节点和 append 到它，如下所示。

function create() {

  let input = document.createElement("input");
  input.setAttribute('type', 'text');
  input.setAttribute('class', 'form-control');
  input.setAttribute("id", "txt" + a);

  let pickdate = document.createElement("input");
  pickdate.setAttribute('type', 'date');
  pickdate.setAttribute("id", "pickdate" + a);

  document.querySelector('.modal-body').appendChild(pickdate);
  document.querySelector('.modal-body').appendChild(input);

  a++;
}

解决方案2
 0  2021-11-21 13:11:54

在您创建 function 中，首先创建一个新的div.row 。 Append 元素到那个，最后 append 行到模态。 

 let a = 1; //function to create text area and date picker with unique id function create() { let row = document.createElement('div'); row.className = 'row'; let input = document.createElement("input"); input.setAttribute('type', 'text'); input.setAttribute('class', 'form-control'); input.setAttribute("id", "txt" + a); let pickdate = document.createElement("input"); pickdate.setAttribute('type', 'date'); pickdate.setAttribute("id", "pickdate" + a); row.append(pickdate, input); document.querySelector('.modal-body.container-fluid').appendChild(row); a++; }
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#myModal" onclick="create()">Add New Record</button> <;-- Modal start--> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-bs-dismiss="modal">&times:</button> <h4 class="modal-title">Add new Record</h4> </div> <div class="modal-body"> <div class="container-fluid"> <div class="row"> <div class="col-md-1"><label for="name">Name:</label></div> <div class="col-md-11"><input class="form-control input-lg" type="text"></div> </div> <div class="row"> <div class="col-md-1"><label for="name">Purpose:</label></div> <div class="col-md-11"><input class="form-control input-lg" type="text"></div> </div> <div class="row"> <div class="col-md-1"><label for="name">Date:</label></div> <div class="col-md-3"><input class="form-control input-lg" type="date"></div> <div class="col-md-2"><label for="name">Destination/s:</label></div> <div class="col-md-5"><input class="form-control input-lg" type="text"></div> <div class="col-md-1"><button id="addmore" class="btn btn-success" onclick="create()">more</button></div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用JavaScript制作HTML标记 如何使用html和javascript制作一种计算器？ 如何使用JavaScript验证此HTML表单？ 如何使用HTML和JavaScript创建交互式照片库 如何使用 javascript 创建 HTML select 菜单选项 如何使用 JavaScript 创建具有属性和事件的 HTML 元素？ 如何使用 HTML、css 和 javascript 创建此 hover 按钮 如何放置图片并使用Javascript移动图片？ 如何在JavaScript中正确创建img元素而不识别图像并读取“ Object HTML image”代替图像 如何在javascript中使div左移然后右移？ （没有jQuery）
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM