jQuery指定插入位置：如何在ul.menulist前添加secondLayer容器

解决方案 #

你可以直接使用jQuery的before()方法，直接将新建的div插入到.menulist元素的前方，天然满足你要放在a标签后方、menulist前方的需求，同时默认只有.menulist存在时才会执行插入操作，符合你的触发条件：

var thirdLevel = $('<div class="secondLayer">');
// 选中所有menulevel1下的menulist，在每个的前方插入新div
$(".menulevel1 .menulist").before(thirdLevel);

原理解释 #

你之前使用的append()方法是将元素插入到父元素的最后一个子节点位置，所以会出现在menulist的后方。而before()方法是在当前选中的目标元素的同级前方插入新元素，刚好匹配你需要的插入位置。

如果你更习惯用新元素主动调用插入方法，也可以写成如下等价写法：

var thirdLevel = $('<div class="secondLayer">');
thirdLevel.insertBefore(".menulevel1 .menulist");

插入后最终的DOM结构如下，符合你的预期：

<li class="menulevel1">
  <a class=""></a>
  <div class="secondLayer"></div>
  <ul class="menulist">
    <li class="menulevel2"></li>
  </ul>
</li>

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