Javascript 如何通过单击按钮添加一组html元素

我需要设计一个按钮，通过单击添加一组html元素。要添加的零件位于

中。简化结构如下：

工号
地位

每次用户单击按钮时，带有新id的整个新的

部分将插入到上一个

之后。例如，id为

entrySection_2

的新节

---

有没有一种简单的方法可以将整个节保存为一个结构不变的变量，并插入到上一节之后？

您可以用按钮切换可见性

因此，在要显示的部分上，将显示设置为“无”，然后单击按钮时，将显示设置为“块”或“内联块”

或者，如果您想在其中完全添加节和元素，而不是仅仅隐藏它们，您可以使用以下方法构建结构：

this.$fixture=$([
"",
"  ",
"  ",
"    ",
"  ",
""
].join（“\n”）；

借

或者使用本文中的jquery方法。我也确信也有一些简单的javascript版本

---

并在单击按钮时触发这些函数。

您可以尝试使用jQuery的和，如下所示：

var cloneCount=1
$（'#添加'）。单击（函数（）{
$（'#entrySection_1'）.clone（）
.attr（'id'，'entrySection_u'+++cloneCount）
.insertAfter（'[id^=entrySection]：last'）；
});

添加
工号
地位
和香草js

您好，有几种方法可以做到这一点，这可能是一个，创建一个函数，返回一个html元素，然后插入到dom中，每次点击按钮

每次单击时，都会调用insert Html函数，并使用insertAdherentHTML（）方法创建节点，并将增加id计数的计数作为参数传递，以了解更多信息


const-button=document.querySelector（“.button”）
const el=document.querySelector（“.parent元素”）
让计数=0
函数insertHtml（idNum）{
常量html=`
...
`
返回html
}
按钮。addEventListener（“单击”，（）=>{
计数+=1
const div=insertHtml（计数）
el.insertAdjacentHTML（“之前”，div）
})
是。有多种方法可以完成您的任务。你尝试过什么？你的代码在哪里不适合你？你应该自己开始实现它，如果你面临一个特定的问题，你应该提出问题。
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"));

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)
})