JavaScript动态列表项：将删除按钮置于左侧-html教程-PHP中文网

JavaScript动态列表项：将删除按钮置于左侧

碧海醫心

发布： 2025-10-17 08:59:10

原创

122人浏览过

javascript动态列表项：将删除按钮置于左侧

本文档旨在指导开发者在使用JavaScript动态生成列表项时，如何将删除按钮放置在列表项的左侧。通过调整DOM元素的创建和添加顺序，实现自定义样式的列表项，并提供完整的示例代码和CSS样式，帮助你轻松掌握列表项的布局控制。

在JavaScript中动态创建列表项（<li>）并添加删除按钮时，默认情况下，按钮通常会添加到列表项的末尾，也就是右侧。如果希望将删除按钮放置在列表项的左侧，只需要调整创建和添加元素的顺序即可。

实现方法

核心思路是在创建<li>元素后，先将删除按钮作为子元素添加到<li>中，然后再添加文本节点。这样，在HTML结构中，按钮就会位于文本内容之前，从而显示在左侧。

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

示例代码

以下代码展示了如何修改原有的createListElement函数，将删除按钮放置在列表项的左侧：

function createListElement() {
  // 创建新的 li 元素
  var li = document.createElement("li");

  // 创建删除按钮
  var newButton = document.createElement("button");
  newButton.innerHTML = "X";

  // 先将按钮添加到 li 元素
  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);
  });

  // 将构造好的 li 元素添加到 ul 元素
  ul.appendChild(li);
}

登录后复制

在上面的代码中，关键的改变在于：

爱图表

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

查看详情

创建了 newButton 按钮元素。
使用 li.appendChild(newButton) 将按钮添加为 li 元素的第一个子元素。
使用 li.appendChild(document.createTextNode(input.value)) 将文本节点添加到 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() {
  // 创建新的 li 元素
  var li = document.createElement("li");

  // 创建删除按钮
  var newButton = document.createElement("button");
  newButton.innerHTML = "X";

  // 先将按钮添加到 li 元素
  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);
  });

  // 将构造好的 li 元素添加到 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();
  })
}

登录后复制

CSS 样式 (可选)

以下是一些可选的CSS样式，可以用来美化列表和按钮：

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

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

/* 额外的样式 */

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

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

登录后复制

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>

登录后复制

注意事项

DOM 操作性能： 频繁的 DOM 操作可能会影响性能，特别是在处理大量列表项时。可以考虑使用文档片段 (DocumentFragment) 来批量添加元素，减少 DOM 操作次数。
事件委托： 对于动态添加的元素，建议使用事件委托，将事件监听器绑定到父元素上，而不是每个子元素。这样可以避免为每个新元素都绑定事件监听器，提高性能。

总结

通过简单地调整 JavaScript 代码中 DOM 元素的创建和添加顺序，就可以轻松地控制删除按钮在列表项中的位置。理解 DOM 结构和元素添加顺序是实现自定义列表项样式的关键。同时，注意优化 DOM 操作和事件处理，以提高应用程序的性能。

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