本文旨在解决在使用 JavaScript 动态创建列表项时，如何将删除按钮默认放置在列表项左侧的问题。通过修改 DOM 元素的添加顺序，并结合 CSS 样式调整，实现按钮位置的灵活控制。同时，本文还提供了完整的代码示例，帮助开发者快速理解和应用。
在使用 JavaScript 创建动态列表时，常常需要在每个列表项（
）中添加一个删除按钮。默认情况下，使用 appendChild 方法会将新元素添加到父元素的末尾，导致删除按钮出现在列表项的右侧。本文将介绍如何通过修改 JavaScript 代码，将删除按钮放置在列表项的左侧。
解决方案
核心思路在于调整 DOM 元素的添加顺序。在创建新的列表项时，先将删除按钮添加到
元素中，然后再添加文本节点。这样，按钮就会出现在文本的前面，从而实现左侧显示的效果.
代码示例
以下是修改后的 JavaScript 代码：
立即学习“Java免费学习笔记（深入）”；
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"); // 将按钮添加到 li var newButton = document.createElement("button"); newButton.innerHTML = "X"; li.appendChild(newButton); // 然后将文本添加到 li 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(); })}
关键在于 createListElement 函数中，先创建 newButton 并将其 appendChild 到 li，然后再添加文本节点。
HTML 结构
以下是对应的 HTML 结构：
Javascript event listener
- lettuce
- apples
- oranges
- fruits
- candy
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;}
margin-right 属性用于调整按钮和文本之间的间距，可以根据实际情况进行调整。
注意事项
DOM 操作性能： 频繁的 DOM 操作可能会影响性能。如果需要创建大量的列表项，可以考虑使用文档片段（DocumentFragment）来优化性能。事件委托： 为了提高性能，可以将事件监听器添加到 元素上，而不是每个 元素上。这称为事件委托。
总结
通过调整 DOM 元素的添加顺序，可以轻松地控制动态创建的列表项中删除按钮的位置。结合 CSS 样式调整，可以创建出美观且功能完善的动态列表。在实际开发中，还需要注意性能优化和代码的可维护性。
以上就是JavaScript动态列表项：如何将删除按钮置于左侧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1585153.html
微信扫一扫 
支付宝扫一扫 
