本文档旨在指导开发者在使用JavaScript动态生成列表项时，如何将删除按钮放置在列表项的左侧。通过调整DOM元素的创建和添加顺序，实现自定义样式的列表项，并提供完整的示例代码和CSS样式，帮助你轻松掌握列表项的布局控制。
在JavaScript中动态创建列表项（
）并添加删除按钮时，默认情况下，按钮通常会添加到列表项的末尾，也就是右侧。如果希望将删除按钮放置在列表项的左侧，只需要调整创建和添加元素的顺序即可。
实现方法
核心思路是在创建
元素后，先将删除按钮作为子元素添加到中，然后再添加文本节点。这样，在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);}
在上面的代码中，关键的改变在于：
创建了 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 结构
Javascript event listener
- lettuce
- apples
- oranges
- fruits
- candy
注意事项
DOM 操作性能： 频繁的 DOM 操作可能会影响性能，特别是在处理大量列表项时。可以考虑使用文档片段 (DocumentFragment) 来批量添加元素，减少 DOM 操作次数。事件委托： 对于动态添加的元素，建议使用事件委托，将事件监听器绑定到父元素上，而不是每个子元素。这样可以避免为每个新元素都绑定事件监听器，提高性能。
总结
通过简单地调整 JavaScript 代码中 DOM 元素的创建和添加顺序，就可以轻松地控制删除按钮在列表项中的位置。理解 DOM 结构和元素添加顺序是实现自定义列表项样式的关键。 同时，注意优化 DOM 操作和事件处理，以提高应用程序的性能。
以上就是JavaScript动态列表项：将删除按钮置于左侧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1585314.html
微信扫一扫 
支付宝扫一扫 
