在特定位置单击创建输入字段

Question

我有一个表单，如果用户单击“添加更多”按钮，我想在其中动态添加输入字段。目前它可以在点击时创建按钮，但按钮不会在我想要的位置创建。这是我的 HTML 代码片段：

window.addEventListener("load", function() {
  var addMoreButtons = document.querySelectorAll("#add-more1, #add-more2");
  addMoreButtons.forEach(function(button) {
    button.addEventListener("click", function() {
      console.log(button);
      // Create a div
      var div = document.createElement("div");

      // Create a text input
      var text = document.createElement("input");
      text.setAttribute("type", "text");
      text.setAttribute("name", "More");
      text.setAttribute("placeholder", "Weitere hinzufügen");

      // add the file and text to the div
      div.appendChild(text);

      //Append the div to the container div
      document.querySelector(".buttonTest").appendChild(div);
    });
  });
});

<div class="user-details">
  <div class="input-box">
    <span class="details">Stärken</span>
    <input type="text" placeholder="Stärken, z.B. 'Kommunikativ'" id="strenghts">
    <div class="buttonTest">
      <button type="button" class="add-more" id="add-more1">+ Weitere 
                    hinzufügen</button>
    </div>
  </div>
  <div class="input-box">
    <span class="details">Technische Fähigkeiten</span>
    <input type="text" placeholder="Technische Fähigkeiten, z.B. 'JavaScript'" id="tech">
    <div class="buttonTest">
      <button type="button" class="add-more" id="add-more2">+ Weitere hinzufügen</button>
    </div>
  </div>
</div>

现在每次单击第一个 (#add-more1) 或第二个 (#add-more2) 按钮时，都会在第一个按钮下方创建输入字段。但我希望输入字段出现在单击按钮的位置。例如：如果单击第一个按钮，我希望在第一个按钮下方创建输入字段。如果单击第二个按钮，我希望在第二个按钮下方而不是在第一个按钮下方创建输入字段。

感谢您的帮助！ :)

Answer 1

您需要使用 parentElement

https://www.w3schools.com/jsref/prop_node_parentelement.asp

示例：

window.addEventListener("load", function() {
  var addMoreButtons = document.querySelectorAll("#add-more1, #add-more2");
  addMoreButtons.forEach(function(button){
    button.addEventListener("click", function() {
        console.log(button);
      // Create a div
      var div = document.createElement("div");
  
      // Create a text input
      var text = document.createElement("input");
      text.setAttribute("type", "text");
      text.setAttribute("name", "More"); 
      text.setAttribute("placeholder", "Weitere hinzufügen");
  
      // add the file and text to the div
      div.appendChild(text);
  
      //Append the div to the container div
      button.parentElement.appendChild(div);
    });
  });
});

<div class="user-details">
            <div class="input-box">
                <span class="details">Stärken</span>
                <input type="text" placeholder="Stärken, z.B. 'Kommunikativ'" id="strenghts">
                <div class="buttonTest">
                    <button type="button" class="add-more" id="add-more1">+ Weitere 
                    hinzufügen</button>
                </div>
            </div>
            <div class="input-box">
                <span class="details">Technische Fähigkeiten</span>
                <input type="text" placeholder="Technische Fähigkeiten, z.B. 'JavaScript'" id="tech">
                <div class="buttonTest">
                    <button type="button" class="add-more" id="add-more2">+ Weitere hinzufügen</button>
                </div>
            </div>
         </div>

Answer 2

我已经稍微简化了您的代码，使用 event delegation and [element].insertAdjacentHTML 添加文本输入元素。对于新的文本输入元素，使用旧元素的副本。使用 insertAdjacentHTML 可以控制新元素的放置（这里：after 包含单击按钮的 div，cf afterend）。

document.addEventListener(`click`, handle);

function handle(evt) {
  const bttn = evt.target.closest(`.buttonTest`);
  if (bttn) {
    const inputElemCopy = bttn.closest(`.input-box`)
      .querySelector(`input`).cloneNode(true);
    inputElemCopy.name = `${inputElemCopy.id}_more`;
    inputElemCopy.removeAttribute(`id`);
    bttn.insertAdjacentHTML(
      `afterend`,
      `<div>${inputElemCopy.outerHTML}</div>`);
  }
}

<div class="user-details">
  <div class="input-box">
    <span class="details">Stärken</span>
    <input type="text" placeholder="Stärken, z.B. 'Kommunikativ'" 
      id="strenghts">
    <div class="buttonTest">
      <button type="button" class="add-more" id="add-more1">+ Weitere 
        hinzufügen</button>
    </div>
  </div>
  <div class="input-box">
    <span class="details">Technische Fähigkeiten</span>
    <input type="text" placeholder="Technische Fähigkeiten, z.B. 'JavaScript'" 
      id="tech">
    <div class="buttonTest">
      <button type="button" class="add-more" id="add-more2">+ Weitere 
        hinzufügen</button>
    </div>
  </div>
</div>

在特定位置单击创建输入字段

Create Input Field on click at specific position

javascript

button