例如，原始代码中的追加顺序可能是：

1. 创建
2. 元素。
3. 将文本节点追加到
4. 。
5. 创建元素。
6. 将元素追加到
   。

这种顺序自然会导致按钮出现在文本的右侧，与HTML中预设的X文本结构（按钮在文本左侧）产生冲突。

解决方案

要确保动态生成的删除按钮始终位于列表项文本的左侧，核心策略是调整JavaScript中DOM元素的追加顺序。具体来说，在将文本内容追加到

代码实现

我们将通过一个完整的示例来演示如何修改JavaScript代码以实现这一目标。

HTML 结构

首先，我们定义基本的HTML结构，包括一个输入框、一个添加按钮和一个无序列表，其中包含一些预设的列表项。

Javascript event listener

Enter


  
Xlettuce
  
Xapples
  
Xoranges
  
Xfruits
  
Xcandy

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; /* 完成状态下文本显示删除线 */
}

JavaScript 逻辑

核心的修改在于createListElement函数。我们将创建和追加删除按钮的操作放在了创建和追加文本内容之前。

var button = document.getElementById("enter");
var input = document.getElementById("user");
var ul = document.querySelector("ul");
// 获取页面初始存在的
元素和删除按钮，并为它们绑定事件
var liElements = document.querySelectorAll("li"); 
var clearButtons = document.getElementsByClassName("clearButton");

/**
 * 检查输入框是否有内容
 * @returns {number} 输入内容的长度
 */
function listItems() {
  return input.value.length;
}

/**
 * 创建并添加一个新的列表项到
中
 */
function createListElement() {
  var li = document.createElement("li"); // 创建新的
元素

  // 1. 创建并追加删除按钮到
元素
  var newButton = document.createElement("button");
  newButton.innerHTML = "X"; // 设置按钮文本
  li.appendChild(newButton); // **关键：先追加按钮**

  // 2. 然后追加文本内容到
元素
  li.appendChild(document.createTextNode(input.value)); // **再追加文本**

  input.value = ""; // 清空输入框内容

  // 为新创建的
添加点击事件，用于标记完成状态
  li.addEventListener("click", function() {
    li.classList.toggle("done");
  });

  // 为新创建的删除按钮添加点击事件
  newButton.addEventListener("click", function(event) {
    event.stopPropagation(); // **阻止事件冒泡**：防止点击删除按钮时触发
的点击事件
    ul.removeChild(li); // 从
中移除当前
元素
  });

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

/**
 * 处理“Enter”按钮点击事件
 */
function addItemAfterEnter() {
  if (listItems() > 0) {
    createListElement();
  }
}

/**
 * 处理输入框键盘按下事件（特别是回车键）
 * @param {Event} event - 键盘事件对象
 */
function addItemAfterKeypress(event) {
  if (listItems() > 0 && event.keyCode === 13) { // 检查是否有内容且按下了回车键
    createListElement();
  }
}

// 绑定事件监听器到“Enter”按钮和输入框
button.addEventListener("click", addItemAfterEnter);
input.addEventListener("keypress", addItemAfterKeypress);

// 为页面初始存在的
元素添加点击事件
for (var i = 0; i < liElements.length; i++) {
  liElements[i].addEventListener("click", function() {
    this.classList.toggle("done");
  });
}

// 为页面初始存在的删除按钮添加点击事件
for (var i = 0; i < clearButtons.length; i++) {
  clearButtons[i].addEventListener("click", function(event) {
    event.stopPropagation(); // 阻止事件冒泡
    this.parentNode.remove(); // 移除按钮的父节点（即
元素）
  });
}

关键修改点解释：

在createListElement函数中，我们调整了appendChild的调用顺序：

// 之前的顺序（导致按钮在右侧）：
// li.appendChild(document.createTextNode(input.value)); // 先文本
// ...
// li.appendChild(newButton); // 后按钮

// 现在的顺序（确保按钮在左侧）：
var newButton = document.createElement("button");
newButton.innerHTML = "X";
li.appendChild(newButton); // **先追加按钮**
li.appendChild(document.createTextNode(input.value)); // **再追加文本**

通过这种简单的顺序调整，当浏览器解析和渲染新创建的