htmlappend詳解

一、htmlappend()函數

function htmlappend(element, html) {
  const elem = document.querySelector(element);
  elem.insertAdjacentHTML("beforeend", html);
}

htmlappend()函數是一個用來向HTML文檔中指定元素追加內容的函數，使用該函數可以動態地修改HTML文檔的內容。函數的參數有兩個，element表示要修改的元素的選擇器，html則表示要添加的html元素和文本。該函數利用了DOM API的insertAdjacentHTML()方法向選擇器所匹配的元素的末尾位置添加html元素和文本，並且支持一些插入位置的選擇。

使用htmlappend()函數可以方便地動態修改頁面內容，比如可以在用戶點擊某個按鈕時，動態地添加一些內容到頁面中。

二、htmlappend()不重複疊加

在使用htmlappend函數時，可能會出現重複添加內容的情況。這種情況可以通過在html元素中添加一個唯一的id屬性來解決。在往指定元素添加內容時，首先查詢該元素是否已經存在該id屬性的元素，如果存在則先將其刪除，再往該元素添加內容。

function htmlappend(element, html) {
  const elem = document.querySelector(element);
  const child = elem.querySelector(`#${html.id}`);
  if (child) {
    child.remove();
  }
  elem.insertAdjacentHTML("beforeend", html);
}

代碼中，先使用elem.querySelector()方法查找指定id的元素，如果存在則使用child.remove()方法刪除該元素，再往該元素添加所要添加的內容，這樣就能保證指定元素只添加一次內容。

三、添加列表

通過htmlappend()函數可以方便地向HTML文檔添加列表元素，下面是一個示例代碼：

const list = document.createElement("ul");
list.id = "myList";
htmlappend("body", list);
for (let i = 1; i < 6; i++) {
  const item = document.createElement("li");
  item.textContent = `列表項${i}`;
  htmlappend("#myList", item);
}

代碼中，首先使用document.createElement()方法創建一個ul元素，並添加一個id屬性。然後使用htmlappend()將ul元素添加到body元素中。最後使用一個for循環創建5個li元素，添加文本內容後再使用htmlappend()將其添加到ul元素中。

執行該代碼後，會在頁面中動態生成一個id為myList的無序列表，其中包含5個列表項。

四、動態添加圖片

htmlappend()函數也可以用來動態向HTML文檔中添加圖片。下面是一個示例代碼，用來動態地向HTML文檔中添加一張圖片：

const img = document.createElement("img");
img.src = "https://via.placeholder.com/150";
img.alt = "示例圖片";
htmlappend("body", img);

代碼中，首先使用document.createElement()方法創建一個img元素，並設置src和alt屬性。然後使用htmlappend()將img元素添加到body元素中。執行該代碼後，在HTML文檔中會動態生成一張圖片。

五、利用htmlappend()實現局部刷新

利用htmlappend()函數可以方便地實現局部刷新，即只更新頁面某個區域的內容，而不需要重新加載整個頁面。以下是一個示例代碼：

const btn = document.querySelector("#myBtn");
btn.addEventListener("click", () => {
  const text = document.createElement("p");
  text.textContent = "動態添加的內容";
  htmlappend(".refresh", text.outerHTML);
});

代碼中，首先獲取了一個id為myBtn的按鈕元素，並添加了一個click事件監聽。當按鈕被點擊時，創建一個p元素，設置其文本內容，並調用htmlappend()方法，將p元素的outerHTML添加到選擇器為.refresh的元素後面。這樣，每次點擊按鈕時，只會更新選擇器為.refresh的元素後面的內容。

六、總結

htmlappend()函數是一個非常便利的函數，可以方便地動態修改HTML文檔內容，同時也可以利用該函數實現局部刷新。在使用該函數時需要注意一些細節，比如不重複疊加的問題，可以通過添加唯一的id屬性來避免。htmlappend()函數的使用方法和樣例代碼已經在上面進行了詳細的闡述，希望可以幫助讀者更好地理解和使用該函數。