如何用JavaScript将空li元素移动到前一个列表项中

需求说明 #

现有如下DOM结构：

<ul class="menu">
<li class="list-1"><ul class="ul-1"></ul></li>
<li class="list-2"><ul class="ul-2"></ul></li>
<li class="list-3"><ul class="ul-3"></ul></li>
<li class="list-4 empty-list"></li>
<li class="list-5"><ul class="ul-5"></ul></li>
</ul>

需要将带有empty-list类的空列表项（list-4）移动到它的前一个列表项（list-3）的内部。

错误代码分析 #

你尝试的代码存在以下问题：

• 选择器错误：document.querySelectorAll('.list')无法匹配list-1/list-2这类带后缀的类名，没有选中任何元素
• 逻辑方向错误：代码试图从当前项找下一个兄弟，再在当前项内部找empty-list，但empty-list本身就是列表项，不是子元素，且逻辑完全颠倒
• 类名判断错误：nextSibling.classList.contains('list-')中的list-不是完整类名，无法匹配任何元素

正确实现代码 #

document.addEventListener('DOMContentLoaded', function () {
    // 定位所有标记为empty-list的列表项
    const emptyItems = document.querySelectorAll('.empty-list');
    
    emptyItems.forEach(item => {
        // 获取当前空项的前一个兄弟元素
        const prevSibling = item.previousElementSibling;
        // 校验前一个兄弟的有效性
        if (prevSibling && prevSibling.parentElement.classList.contains('menu')) {
            // 将空项移动到前一个兄弟元素内部
            prevSibling.appendChild(item);
        }
    });
});

代码说明 #

1. 页面DOM加载完成后，先通过querySelectorAll('.empty-list')精准定位所有需要移动的空列表项
2. 遍历每个空项，使用previousElementSibling获取它的前一个兄弟元素（即目标容器）
3. 增加校验逻辑，确保前一个兄弟元素存在且属于.menu容器，避免误操作其他DOM元素
4. 调用appendChild方法移动元素——DOM元素在页面中是唯一的，移动时会自动从原位置移除，无需额外执行删除操作

内容的提问来源于stack exchange，提问作者Christian Ansel Thrige