diff --git a/budget.js b/budget.js
index 24651d7..274941c 100644
--- a/budget.js
+++ b/budget.js
@@ -148,15 +148,23 @@ function updateUI() {
 }
 
 function showEntry(list, type, title, amount, id) {
-  const entry = `<li id="${id}" class="${type}">
-                    <div class="entry">${title} : $${amount}</div>
-                    <div id="edit"></div>
-                    <div id="delete"></div>
-                  </li>`;
-  const position = "afterbegin";
-  list.insertAdjacentHTML(position, entry);
-}
+  const li = document.createElement("li");
+  li.id = id;
+  li.className = type;
+
+  const entryDiv = document.createElement("div");
+  entryDiv.className = "entry";
+  entryDiv.textContent = `${title} : $${amount}`;  // 安全！
+
+  const editDiv = document.createElement("div");
+  editDiv.id = "edit";
 
+  const deleteDiv = document.createElement("div");
+  deleteDiv.id = "delete";
+
+  li.append(entryDiv, editDiv, deleteDiv);
+  list.insertAdjacentElement("afterbegin", li);
+}
 function clearElement(elements) {
   elements.forEach((element) => {
     element.innerHTML = "";