javascript - 单击评论部分中的回复按钮时添加表单

Question

我设计了一个带有回复的评论部分。当用户单击回复按钮时，我希望在同一评论下创建评论表单。我自己写的，但是当我点击回复按钮时，只为第一条评论创建表单。

function addtextbox() {
  // Create a form dynamically.
  var form = document.createElement("form");
  
  form.setAttribute("method", "post");
  form.setAttribute("action", "submit.php");

  // Create an input element for replyText.
  var ID = document.createElement("input");
  
  ID.setAttribute("type", "text");
  ID.setAttribute("name", "body");
  ID.setAttribute("placeholder", "Your Comment");
  form.append(ID);
  document.getElementsByClassName('formbox')[0].appendChild(form);
}

<button onclick="addtextbox()">reply</button>
<div class="formbox"></div>

Answer 1

有很多方法，但这是最简单的。祝你好运 ;）

        const replayButtons = document.querySelectorAll('.replay');
        
        replayButtons.forEach(item => {
            item.addEventListener('click', () => {
                item.parentElement.insertAdjacentHTML('beforeend', `
                    <input type="text" placeholder="write your replay" />
                `);
            });
        })

    <div>
        <h1>Post1</h1>
        <p>Lorem ipsum dolor sit.</p>
        <br>
        <button class="replay">Replay</button>
        <br>
    </div>
    <div>
        <h1>Post2</h1>
        <p>Lorem ipsum dolor sit.</p>
        <br>
        <button class="replay">Replay</button>
        <br>
    </div>
    <div>
        <h1>Post3</h1>
        <p>Lorem ipsum dolor sit.</p>
        <br>
        <button class="replay">Replay</button>
        <br>
    </div>