本文档旨在解决在使用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); })}
修改后的代码片段：
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 (保持不变):
Javascript event listener
- lettuce
- apples
- oranges
- fruits
- candy
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动态添加列表项时，如何将删除按钮置于左侧？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1584427.html
微信扫一扫 
支付宝扫一扫 
