JavaScript动态添加列表项时，如何将删除按钮置于左侧？-html教程-PHP中文网

JavaScript动态添加列表项时，如何将删除按钮置于左侧？

DDD

发布： 2025-10-14 10:45:00

原创

339人浏览过

javascript动态添加列表项时，如何将删除按钮置于左侧？

本文档旨在解决在使用JavaScript动态创建列表项时，如何将删除按钮放置在列表项左侧的问题。通过修改JavaScript代码中元素的添加顺序，可以轻松实现这一需求。本文将提供详细的代码示例和步骤说明，帮助开发者更好地掌握动态列表项的创建和样式控制。

在使用 JavaScript 动态创建列表（li）元素并添加删除按钮时，按钮默认会出现在列表项的右侧。但有时，我们希望将删除按钮放在列表项的左侧，这可以通过调整 JavaScript 代码中元素的添加顺序来实现。

实现方法

核心在于 createListElement() 函数中，调整按钮和文本节点的添加顺序。原始代码先创建文本节点，再添加按钮，导致按钮出现在右侧。修改后的代码先创建并添加按钮，然后再添加文本节点，从而实现按钮在左侧的效果。

原始代码片段：

立即学习“Java免费学习笔记（深入）”；

function createListElement() {
  var li = document.createElement("li");
  li.appendChild(document.createTextNode(input.value)); // 先添加文本
  ul.appendChild(li);
  var newButton = document.createElement("button");
  newButton.innerHTML = "X";
  li.appendChild(newButton); // 后添加按钮
  input.value = "";
  li.addEventListener("click", function() {
    li.classList.toggle("done");
  })

  newButton.addEventListener("click", function() {
    ul.removeChild(li);

  })
}

登录后复制

修改后的代码片段：

爱图表

AI驱动的智能化图表创作平台

查看详情

function createListElement() {
  var li = document.createElement("li");

  // 先添加按钮
  var newButton = document.createElement("button");
  newButton.innerHTML = "X";
  li.appendChild(newButton);

  // 然后添加文本
  li.appendChild(document.createTextNode(input.value));
  input.value = "";

  li.addEventListener("click", function() {
    li.classList.toggle("done");
  });

  newButton.addEventListener("click", function() {
    ul.removeChild(li);
  });

  // add the constructed li to the ul
  ul.appendChild(li);
}

登录后复制

完整示例代码：

var button = document.getElementById("enter")
var input = document.getElementById("user");
var ul = document.querySelector("ul");
var li = document.querySelectorAll("li");
var clearButton = document.getElementsByClassName("clearButton");

function listItems() {
  return input.value.length
}

function createListElement() {
  // create the new li element
  var li = document.createElement("li");

  // add the button to the li
  var newButton = document.createElement("button");
  newButton.innerHTML = "X";
  li.appendChild(newButton);

  // then add the text to the li
  li.appendChild(document.createTextNode(input.value));
  input.value = "";

  li.addEventListener("click", function() {
    li.classList.toggle("done");
  });

  newButton.addEventListener("click", function() {
    ul.removeChild(li);
  });

  // add the constructed li to the ul
  ul.appendChild(li);
}

function addItemAfterEnter() {
  if (listItems() > 0) {
    createListElement();
  }
}

function addItemAfterKeypress(event) {
  if (listItems() > 0 && event.keyCode === 13) {
    createListElement();
  }
}

button.addEventListener("click", addItemAfterEnter);
input.addEventListener("keypress", addItemAfterKeypress)


for (var i = 0; i < li.length; i++) {
  li[i].addEventListener("click", function() {
    this.classList.toggle("done");
  })
}

for (var i = 0; i < clearButton.length; i++) {
  clearButton[i].addEventListener("click", function() {
    this.parentNode.remove();
  })
}

登录后复制

HTML (保持不变):

<h1>Javascript event listener</h1>
<input id="user" type="text" placeholder="enter item here">
<button id="enter">Enter</button>
<p id="test"></p>
<ul>
  <li class="red blue" random="26"><button class="clearButton">X</button>lettuce</li>
  <li><button class="clearButton">X</button>apples</li>
  <li><button class="clearButton">X</button>oranges</li>
  <li><button class="clearButton">X</button>fruits</li>
  <li><button class="clearButton">X</button>candy</li>
</ul>

登录后复制

CSS (保持不变):

ul {
  list-style-type: none;
  padding: 0;
  width: 15rem;
}

li button {
  color: red;
  margin-right: .5rem;
  border-radius: 10px;
  border: none;
}

/* bonus styles */

li:hover, li button:hover {
  cursor: pointer;
}

.done {
  text-decoration: line-through;
}

登录后复制

注意事项

CSS 样式： 可以使用 CSS 的 margin-right 或 margin-left 属性调整按钮与文本之间的间距，以达到更好的视觉效果。
事件监听： 确保删除按钮的事件监听器正确绑定，防止删除功能失效。
兼容性： 考虑不同浏览器的兼容性，进行必要的测试。

总结

通过调整 JavaScript 代码中元素的添加顺序，可以轻松控制动态添加的元素在页面中的位置。在创建动态列表项时，先添加删除按钮，再添加文本节点，即可实现将删除按钮放置在列表项左侧的效果。同时，合理运用 CSS 样式可以进一步优化页面呈现效果。

以上就是JavaScript动态添加列表项时，如何将删除按钮置于左侧？的详细内容，更多请关注php中文网其它相关文章！