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

【问题标题】：How to add dynamically html in the right section?如何在右侧部分动态添加html？
【发布时间】：2020-12-19 16:23:22
【问题描述】：

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

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>trial </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--bootstrap setup-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="trial.js"></script>
    
  </head>

  <div>
    <p> Title</p>
  </div>

  <div>
    <button class = "btn_add">Add  </button> 
  </div>
  <!-- level container-->
  <div id = "container">

  </div>
  <!--stuff container -->
  <div id="random_container">                
  </div>

  </body>
</html>

$(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>`
    );
  });
    
});

我的想法是，如果我单击按钮添加，我应该有一个 div，其中有 1 级和按钮添加内容。它的工作原理。

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

相反，会发生什么，我的文本框只有一个级别。

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

希望问题很清楚。

【问题讨论】：

这能回答你的问题吗？ Adding div element to body or document in JavaScript
您正在向文档中添加多个带有id="title" 的元素，但id 应该是唯一的。至于将文本框添加到正确的 div，你可以使用类似的东西，我猜？ jsfiddle.net/zo62fn7h
@JózefPodlecki，不。我的问题不清楚吗？我应该尝试用不同的方式解释吗？
@ChrisG ，标题是我会用json改变的东西，所以id标题会改变。但与此同时，我希望将文本框放在“正确”的位置。我点击了两次添加，所以我有两个级别。这些级别中的每一个都有一个名为添加内容的按钮和级别的名称。我在第一层，我点击按钮添加东西，两次我应该在第一层看到 2 个文本框。
我明白了，这不正是我的小提琴所做的吗？

标签： javascript html jquery button

【解决方案1】：

看到你在使用 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++;
});

注意：您的代码将尝试在某些地方创建具有相同 id 的元素。做不到。

【讨论】：

i 定义/增量在哪里？
嘿伙计！我只是专注于帮助您解决主按钮单击和构建控件的问题区域。相信你可以从这里接受我的意见。 PS。您可能希望在 $(document).ready 之外声明您的 var i = 1 并在按钮单击内递增。

【解决方案2】：

如果我理解正确，那么您应该删除 random_container 并在输入下方添加 textareas

<!DOCTYPE html>
<html>
  <head>
    <title>trial </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--bootstrap setup-->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="trial.js"></script>

  </head>
<body>
  <div>
    <p> Title</p>
   </div>

   <div>
    <button class = "btn_add">Add  </button>
</div>
<!-- level container-->
<div id = "container">

</div>

</body>

<script>
    function addStaff(btn) {
        var parent = $(btn).parent()
        console.log(parent)
        parent.append(`
            <div id="card">
                <textarea placeholder="Title" type="text" maxlength="10" rows="1">Stuff</textarea>
            </div>
        `)
    }

    $(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 id="add_staff-${i}">
                    <button id="btnadd_${i}" onclick="addStaff(this)"> Add Stuff </button>
                </div>
            `);

            $('#container').append(newElement);


            i = i + 1;
        });
    });
</script>

</html>

【讨论】：

这里没关系，在 SO sn-p... 但是没有 <body> 标签，</body> 标签应该在 <script> 块之后。