Javascript 如何在右侧部分动态添加html？

我想在每个div中添加一个文本框，这是我动态创建的

HTML

试验
头衔

添加

JS

$（文档）.ready（函数（）{
var i=1；
$（文档）.on（'单击'，'.btn_添加'，（）=>{
让newElement=document.createElement（'div'）；
setAttribute（“id”、“级别”+i）；
setAttribute（“类”、“面板”）；
$（“#容器”）。追加(`\
一级+`
\
\
添加内容
`);
$（“#容器”）.append（新元素）；
i=i+1；
});
$（文档）.on（'click'，'.btn_addStuff'，（）=>{
/**let element=document.getElementById（div=“level_u2;”+i）；
元素。追加（`\
东西\
`);
$（'random_container'）。追加（元素）*/
$（'#随机容器'）。追加（`\
东西\
`
);
});
});

我的想法是，如果我单击按钮add，我应该有一个div，其中有level 1和按钮add stuff。这是有效的

例如，如果我单击3次按钮add，我应该有三个div，每个div包含一个按钮addstuff和名称级别。我想做的是，如果我点击按钮添加东西，它会出现一个文本框。我的代码存在的问题是，我无法将文本框置于正确的位置。如果我在一级，我点击两次按钮添加内容，我应该在一级得到两个文本框，如果我决定点击三次在二级得到三个框，我应该得到三个文本框

取而代之的是，我的文本框只有一个级别

我的想法是尝试在addstuff按钮中获取id，然后尝试追加代码，然后在random_容器中添加所有内容，但我无法获取动态创建的元素

---

希望问题是清楚的。

既然您正在使用jQuery，那么使用jQuery来创建新元素将更容易：

var i = 1;

$(".btn_add").on('click', () => {
    // Create Main Div
    var mainDiv = $("<div />").prop("id", "level_" + i).addClass("panel");
    // Create Title Div
    var divTitle = $("<div />").prop("id", "title_" + i).html("Level " + i);
    // Create Button to add cards inside this div
    var divButton = $("<button />")
        .prop("id", "btnAdd" + i)
        .html("Add Stuff")
        .on('click', () => {
             // Get number of cards already in this div so we can generate unique id
             var cardCount = $("#level_" + i).find(".card").length;
             // create the Card
             var card = $("<div />").prop("id", "card_" + cardCount + 1).addClass("card").html("I am a card");
             // Put the card in this div
             $("#level_" + i).append(card);
        }));

    // Put it together
    mainDiv.append(divTitle).append(divButton);

    // Put it in the container
    $("#container").append(mainDiv);

    // Increment the counter
    i++;
});

var i=1；
$（“.btn_add”）。在（'单击'，（）=>{
//创建主分区
var mainDiv=$（“”）.prop（“id”，“level_“+i）.addClass（“panel”）；
//创建标题Div
var divTitle=$（“”）.prop（“id”，“title_u”+i）.html（“Level”+i）；
//“创建”按钮可在此分区内添加卡
var divButton=$（“”）
.道具（“id”、“btnAdd”+i）
.html（“添加内容”）
.on（'单击'，（）=>{
//获取此分区中已存在的卡数，以便生成唯一id
var cardCount=$（“#level"+i）.find（“.card”）.length；
//创建卡片
var card=$（“”）.prop（“id”、“card_quo”+cardCount+1）.addClass（“card”）.html（“我是一张卡”）；
//把卡片放在这个div里
$（“#级别"+i）.附加（卡片）；
}));
//把它放在一起
mainDiv.append（divTitle）.append（divButton）；
//把它放在容器里
$（“#容器”）.append（mainDiv）；
//递增计数器
i++；
});

---

注意：您的代码将尝试在位置中创建具有相同id的元素。不能这样做。

如果我理解正确，那么您应该删除random_容器并在输入下面添加文本区域

试验
头衔

添加
功能addStaff（btn）{
var parent=$（btn）.parent（）
console.log（父级）
parent.append(`
东西
`)
}
$（文档）.ready（函数（）{
var i=1；
$（文档）.on（'单击'，'.btn_添加'，（）=>{
让newElement=document.createElement（'div'）；
setAttribute（“id”、“级别”+i）；
setAttribute（“类”、“面板”）；
$（“#容器”）。追加(`
级别${i}
添加内容
`);
$（“#容器”）.append（新元素）；
i=i+1；
});
});

这是否回答了您的问题？您正在向文档中添加多个具有

id=“title”

的元素，但是

id

应该是唯一的。至于将文本框添加到右边的div，我想您可以使用类似于@JózefPodlecki，没有。我的问题不清楚吗？我应该试着用另一种方式解释吗？@ChrisG，标题是我将用json更改的东西，因此id标题将更改。但同时，我希望文本框处于“正确”的位置。我点击了两次添加，所以我有两个级别。每个级别都有一个名为add stuff的按钮和级别名称。我在一级，我点击按钮添加东西，两次我应该看到一级中的两个文本框。我明白了，这不正是我的小提琴所做的吗？哪里是

i

defined/incremented？嘿，伙计！我只是专注于帮助您解决主按钮单击的问题区域并构建控件。我相信你可以从这里接受我的意见。另外，您可能希望在$（文档）之外声明您的var i=1。准备好并在按钮单击内递增。在这里，这无关紧要，在SO代码段中。。。但是没有

标记，

标记应该在

块之后。

$(document).ready(function () {

  var i = 1;
  $(document).on('click', '.btn_add', () => {
    let newElement  = document.createElement('div');
    newElement.setAttribute("id", "level_" + i);
    newElement.setAttribute("class", "panel");
    $('#container').append(`<div id="title">\
      Level ` + i +`
      </div> \
      <div>\
      <button id =btnadd_`+ i +` class="btn_addStuff"> Add Stuff </button>
      </div>`);
        
    $('#container').append(newElement);
    
        
    i = i + 1; 
  });
  
  $(document).on('click', '.btn_addStuff', () => {

    /**let element = document.getElementById(div = "level_"+i);
    element.append(`<div id="card"> \
      <textarea placeholder="Title" type="text" maxlength="10" rows="1">Stuff</textarea> \
      </div>`);
    $('random_container').append(element); */

    $('#random_container').append(`<div id="card"> \
      <textarea placeholder="Title" type="text" maxlength="10" rows="1">Stuff</textarea> \
      </div>`
    );
  });
    
});

var i = 1;

$(".btn_add").on('click', () => {
    // Create Main Div
    var mainDiv = $("<div />").prop("id", "level_" + i).addClass("panel");
    // Create Title Div
    var divTitle = $("<div />").prop("id", "title_" + i).html("Level " + i);
    // Create Button to add cards inside this div
    var divButton = $("<button />")
        .prop("id", "btnAdd" + i)
        .html("Add Stuff")
        .on('click', () => {
             // Get number of cards already in this div so we can generate unique id
             var cardCount = $("#level_" + i).find(".card").length;
             // create the Card
             var card = $("<div />").prop("id", "card_" + cardCount + 1).addClass("card").html("I am a card");
             // Put the card in this div
             $("#level_" + i).append(card);
        }));

    // Put it together
    mainDiv.append(divTitle).append(divButton);

    // Put it in the container
    $("#container").append(mainDiv);

    // Increment the counter
    i++;
});