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

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

我在某种程度上简化和增强了您的代码，使用 event delegate 和

[element].insertAdjacentElement

在所需位置添加文本输入元素。

对于新的文本输入元素，使用旧文本输入元素的克隆并将其放置在新的

div

中。在克隆的输入元素之后，放置一个“减号”按钮（它也由

handle

函数处理）。

使用

insertAdjacentElement

可以让您控制新元素的位置（此处：after 包含单击按钮的跨度，参见

afterend

）。

document.addEventListener(`click`, handle);

function handle(evt) {
  const bttnElem = evt.target.closest(`.buttonTest, .added`);
  
  if (bttnElem?.classList.contains(`added`)) {
    return bttnElem.remove();
  }
  
  if (bttnElem) {
    const bttnRoot = bttnElem.closest(`.input-box`);
    const addBttn = bttnRoot.querySelector(`button`);
    const inputElemCopy = bttnRoot.querySelector(`input`).cloneNode(true);
    const text = bttnRoot.querySelector(`.details`).textContent;
    const nwDiv = document.createElement(`div`);
    nwDiv.classList.add(`added`);
    inputElemCopy.name = `${inputElemCopy.id}_more`;
    inputElemCopy.removeAttribute(`id`);
    const removeBttn = addBttn.cloneNode(true);
    removeBttn.title = `Entfernen`;
    removeBttn.textContent = ` - `;
    removeBttn.className = ``;
    nwDiv.append(text + ` `, inputElemCopy, ` `, removeBttn);
    bttnElem.insertAdjacentElement(`afterend`, nwDiv);
  }
}

.user-details {
  font: normal 14px / 19px verdana, arial, sans-serif;
  
  div.input-box {
    margin: 0.2rem 0;
    padding: 0.5rem;
    border: 1px solid #c0c0c0;
    
    div {
      margin: 0.2rem 0;
    }
    
    button {
      font-family: monospace;
      margin-left: 0.2rem;
    }
  }
}

<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">
    <span class="buttonTest">
      <button type="button" class="add-more" id="add-more1"
        title="Weitere hinzufügen"> + </button>
    </span>
  </div>
  <div class="input-box">
    <span class="details">Technische Fähigkeiten</span>
    <input type="text" placeholder="Technische Fähigkeiten, z.B. 'JavaScript'" 
      id="tech">
    <span class="buttonTest">
      <button type="button" class="add-more" id="add-more1"
        title="Weitere hinzufügen"> + </button>
    </span>
  </div>
</div>

Answer 2

你需要使用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>