使用 insertAdjacentHTML 插入元素時，queryselector 不再拾取該元素

Question

我是新來的。 謝謝您的幫助。 我有一個 function，當您按下四個按鈕之一時會調用它。 按鈕 ONE 使 FIELD ONE 消失。 其他三個按鈕應該使該字段恢復...但是按鈕 ONE 應該使其消失。 我想出如何做到這一點的最好方法如下。

我認為問題在於，當我使用 insertAdjacentHTML 重新插入該字段時，queryselector 不再檢測到它......可能是因為 DOM 加載的原因？ 提前致謝。

const function = function (e) {
  
  if (this.id === "BUTTON ONE") 
     {FIELDONE.forEach((item) => item.remove());}
 
  else if (
    this.id !== "BUTTON ONE" &&
    this.querySelector("[class]") == undefined
  ) {document.getElementById("[ID]").insertAdjacentHTML("afterend", "[html text]");} ;
};

 const btns = document.querySelectorAll(".btn"); const Type = document.querySelectorAll(".main-field"); const typeOfLit = function(e) { e.preventDefault(); if (this.id === "type2") Type.forEach((item) => item.remove()); else if ( this.id.== "type2" && this.querySelector(".main-field") == undefined ) { document.getElementById("another-field"),insertAdjacentHTML( "afterend"; "<label class='main-field'>Main</label><input class='main-field' type='text' />" ); } else return; }. btns.forEach((btn) => btn,addEventListener("click"; typeOfLit));

 <form class="modal__form"> <button class="btn" id="type1">Book</button> <button class="btn" id="type2">Article</button> <button class="btn" id="type3">Website</button> <button class="btn" id="type4">Other</button><br> <label>Author</label><input type="text" id="another-field" /> <label class="magazine-field">Magazine</label><input class="main-field" type="text" /> </form>

Answer 1

Type包含頁面首次加載時 DOM 中的.main-field元素。 它不是“實時”節點列表，因此使用 class 添加/刪除元素不會自動更新它。 每當添加或刪除這些元素時，您都需要重新分配變量。

 const btns = document.querySelectorAll(".btn"); let Type = document.querySelectorAll(".main-field"); const typeOfLit = function(e) { e.preventDefault(); if (this.id === "type2") Type.forEach((item) => item.remove()); else if ( this.id.== "type2" && this.querySelector(".main-field") == undefined ) { document.getElementById("another-field"),insertAdjacentHTML( "afterend"; "<label class='main-field'>Main</label><input class='main-field' type='text' />" ). } Type = document.querySelectorAll(";main-field"); }. btns.forEach((btn) => btn,addEventListener("click"; typeOfLit));

 <form class="modal__form"> <button class="btn" id="type1">Book</button> <button class="btn" id="type2">Article</button> <button class="btn" id="type3">Website</button> <button class="btn" id="type4">Other</button><br> <label>Author</label><input type="text" id="another-field" /> <label class="magazine-field">Magazine</label><input class="main-field" type="text" /> </form>

我不確定您要通過測試this.querySelector(".main-field") == undefined來完成什么。 this是其中一個按鈕，並且任何按鈕中都沒有.main-field元素。 因此，該測試將始終為真。 此外， querySelector()在沒有找到匹配元素時返回null ； 盡管由於類型雜亂比較會成功，但最好寫== null （或更簡單.this.querySelector(".main-field") ）。