如何通過單擊按鈕添加一組html元素
[英]How to add a group of html elements by a button click
問題描述
我需要設計一個按鈕，通過單擊添加一組 html 元素。 要添加的部分位於<section> 。 簡化后的結構如下：
<body>
<section class="pb-5" id="entrySection_1">
<div class="container card">
<div class="row" style="padding-top: 10px;">
<div class="col-4">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">WO Number</span>
</div>
<input type="text" class="form-control">
</div>
</div>
<div class="col-8">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Status</span>
</div>
<input type="text" class="form-control">
</div>
</div>
</div>
</div>
</section>
</body>
每次當用戶單擊按鈕時，帶有新 ID 的整個新<section>部分將插入到前一個<section> 。 例如，id 為entrySection_2的新部分。
有沒有一種簡單的方法可以將整個部分保存到一個結構不變的變量中並插入到上一部分之后？
3 個解決方案
解決方案1
1 已采納 2020-11-20 14:19:55
您可以嘗試使用 jQuery 的.clone()和.attr()以及.insertAfter() ，如下所示：
var cloneCount = 1 $('#add').click(function(){ $('#entrySection_1').clone() .attr('id', 'entrySection_'+ ++cloneCount) .insertAfter('[id^=entrySection_]:last'); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="add">Add</button> <section class="pb-5" id="entrySection_1"> <div class="container card"> <div class="row" style="padding-top: 10px;"> <div class="col-4"> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" >WO Number</span> </div> <input type="text" class="form-control"> </div> </div> <div class="col-8"> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" >Status</span> </div> <input type="text" class="form-control"> </div> </div> </div> </div> </section>
解決方案2
0 2020-11-20 14:18:24
你可以用按鈕切換可見性嗎？
因此，將要顯示的部分的顯示設置為“無”，然后單擊按鈕時，將顯示轉為塊或內聯塊。
或者，如果您想在其中完全添加部分和元素，而不是僅僅隱藏它們，您可以使用類似這樣的東西來構建結構。
this.$fixture = $([
"<div>",
" <div class='js-alert-box'></div>",
" <form id='my-form-to-validate'>",
" <input id='login-username' name='login-username'>",
" </form>",
"</div>"
].join("\n"));
或使用本參考指南中的 jquery 方法。 我也確定也有這些的純 javascript 版本。
並在按鈕點擊時觸發這些功能。
解決方案3
0 2020-11-20 15:01:00
使用香草js。
你好，有幾種方法可以做到，這可能是一種，創建一個返回一個 html 元素的函數，然后將它插入到 dom 中，每次單擊按鈕
每次單擊時，都會調用插入 Html 函數，並使用 insertAdherentHTML() 方法創建節點，並將增加 id 計數的計數作為參數傳遞，更多信息
https://developer.mozilla.org/es/docs/Web/API/Element/insertAdjacentHTML
const button = document.querySelector(".button")
const el = document.querySelector(".parent-element")
let count = 0
function insertHtml(idNum) {
const html = `
<section class="pb-5" id="entrySection_${idNum}">
...
</section>
`
return html
}
button.addEventListener("click", () => {
count += 1
const div = insertHtml(count)
el.insertAdjacentHTML("beforeend", div)
})
在 React 中單擊按鈕添加和刪除 HTML 元素
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.