单击时创建 div 在主 div 中包含输入和按钮
[英]create div contains input and button inside a main div on click
问题描述
我正在尝试创建一个新的 div，其中包含一个按钮和一个输入
我尝试使用 .prepend() 但它只能创建 div 并且我无法创建按钮和输入，即使我使用 .appendChild() 总是出现错误
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/bootstrap@5.1.3/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 class="my">My to do list</h1> <div class="container"> <div class="top-section"> <input id="inputField" class="inpt" type="text" name="" value=""> <button id="adding-btn" class="btn btn-info" type="button" name="button">+</button> </div> <div class="second-container"> </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>
3 个解决方案
解决方案1
0 2022-02-23 17:45:41
问题在这里， $("div.dwn-section")这个语句是无效的。 因为它是一个按 class 名称获取的元素，它将是一个数组，所以你应该指定索引，如$('.dwn-section')[0]
但与此同时，如果我们使用任何特定的 ID 字段来获取 div，那么我们可以直接使用$("#dwn-section") 。
$("#adding-btn").click(function(){
secondContainer.prepend("<div class ='dwn-section' ></div>");
$('<input>').appendTo($('.dwn-section')[0]);
})
解决方案2
0 2022-02-23 17:45:48
首先 jQuery 方法到 append 内容是append()而不是appendChild() 。
另请注意，当您尝试使用 jQuery 创建新的 HTML 内容时，您需要包含整个 HTML 字符串，而不仅仅是标签名称。
最后，我假设您创建的新input应包含输入到原始输入中的值，并且应清除旧输入。 为此，在 HTML 字符串中为新输入设置value属性，并使用val('')清除原始输入：
let $secondContainer = $(".second-container"); let $inputField = $('#inputField'); $("#adding-btn").click(function() { let $section = $('<div class="dwn-section"></div>'); $section.append(`<input type="text" value="${$inputField.val()}" readonly />`); $secondContainer.prepend($section); $inputField.val(''); })
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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 class="my">My to do list</h1> <div class="container"> <div class="top-section"> <input id="inputField" class="inpt" type="text" name="" value=""> <button id="adding-btn" class="btn btn-info" type="button" name="button">+</button> </div> <div class="second-container"></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
解决方案3
0 2022-02-23 17:47:07
只需使用 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/bootstrap@5.1.3/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 class="my">My to do list</h1> <div class="container"> <div class="top-section"> <input id="inputField" class="inpt" type="text" name="" value=""> <button id="adding-btn" class="btn btn-info" type="button" name="button">+</button> </div> <div class="second-container"> </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>
3个不同的Main-Div，当单击另一个Main div时将显示在main-div内并关闭main div
[英]3 Different Main-Div and will show inside main-div and close main div when click another main div
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.