如何将div元素移至<ul>内的<li>元素上方？

需求说明 #

需要把页面中独立的.error div元素，移动到.form下的ul列表内部，作为第一个子元素，最终结构如下：

<div class='form'>
  <ul>
    <div class='error'>Content</div>
    <li>Item1</li>
    <li>item2</li>
    <li>Item3</li>
  </ul>
</div>

最优实现方案 #

原生JavaScript提供两种简洁可靠的方法，均为移动元素（而非复制），会自动移除原位置的元素并添加到目标位置：

方法1：使用prepend()（推荐，代码更简洁）

prepend()方法可直接将元素添加到父元素的所有子元素之前，无需额外获取参考元素：

// 获取需要移动的div和目标ul
const errorDiv = document.querySelector('.error');
const targetUl = document.querySelector('.form ul');

// 执行移动
targetUl.prepend(errorDiv);

方法2：使用insertBefore()

如果需要灵活指定插入位置（比如插入到某个特定li之前），可用insertBefore()，注意参数顺序为「要插入的元素」在前，「参考元素」在后：

const errorDiv = document.querySelector('.error');
const targetUl = document.querySelector('.form ul');
// 获取ul的第一个子元素作为参考
const firstLi = targetUl.firstElementChild;

// 将errorDiv插入到firstLi之前
targetUl.insertBefore(errorDiv, firstLi);

失败原因排查 #

若之前使用appendChild/insertBefore未成功，大概率是以下问题：

• 元素选择器错误：未正确选中.form下的ul或.error元素
• insertBefore参数顺序颠倒：正确格式为父元素.insertBefore(要插入的元素, 参考元素)
• 代码执行时机过早：需确保JS在DOM加载完成后执行（比如放在DOMContentLoaded事件中）

内容的提问来源于stack exchange，提问作者iHopeiGetit