单击时创建 div 在主 div 中包含输入和按钮
[英]create div contains input and button inside a main div on click
问题描述
i'm trying to create a new div contains a button and an input inside
我正在尝试创建一个新的 div，其中包含一个按钮和一个输入
i tried to use.prepend() but it can only creates the div and i can't creat the button and the input even when i use.appendChild() allways i get error我尝试使用 .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
The problem here, $("div.dwn-section") this statement is not valid.问题在这里， $("div.dwn-section")这个语句是无效的。 As it is a get element by class name it will be an array, so you should specifiy the index like $('.dwn-section')[0]因为它是一个按 class 名称获取的元素，它将是一个数组，所以你应该指定索引，如$('.dwn-section')[0]
But at the same time if we are using any specific ID field to get the div then we can directly use $("#dwn-section") .但与此同时，如果我们使用任何特定的 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
Firstly the jQuery method to append content is append() not appendChild() .首先 jQuery 方法到 append 内容是append()而不是appendChild() 。
Also note that when you're trying to create new HTML content using jQuery you need to include the entire HTML string, not just a tag name.另请注意，当您尝试使用 jQuery 创建新的 HTML 内容时，您需要包含整个 HTML 字符串，而不仅仅是标签名称。
Lastly, I'm assuming that the new input you create should contain the value which was typed in to the original, and that the old input should be cleared.最后，我假设您创建的新input应包含输入到原始输入中的值，并且应清除旧输入。 To do that set the value attribute in the HTML string for the new input, and use val('') to clear the original one:为此，在 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
Just use append()只需使用 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.