求助：如何在class为time-widget的div前正确追加HTML？

你当前的HTML结构大概是这样的：

<div class="time-widget"> 
  <select id="p_h_0_startHour_hour" name="" class="form-control select-time form-control"> 
    <option value="0"> 00 </option> 
    <!-- 其他选项省略 -->
  </select> 
</div>

你原本尝试用这段JavaScript代码，想在.time-widget这个div前面追加内容：

$('<div>hello</div>').appendTo('#p_h_'+i+'_startHour_hour').parent();

但结果却把<div>hello</div>加到了select元素的内部，完全不是你想要的位置，对吧？

问题出在哪？ #

你的代码里的appendTo('#p_h_'+i+'_startHour_hour')，本质是把新创建的div作为子元素插入到了select标签的内部——这是appendTo()的特性：它会把元素追加到目标元素的内部末尾。后面的.parent()只是返回了select的父元素（也就是.time-widget），但并没有改变之前插入的位置，所以结果自然不对。

正确的解决方法 #

要在.time-widget的同级前方插入元素，你可以用这两种简单的jQuery方法：

方法1：使用before()方法 #

这个方法可以直接在目标元素的前面插入内容，逻辑非常直观：

// 先通过select的ID找到对应元素，再定位到它的父级.time-widget，最后在前面插入内容
$('#p_h_'+i+'_startHour_hour').closest('.time-widget').before('<div>hello</div>');

如果页面上只有一个.time-widget，甚至可以更简单：

$('.time-widget').before('<div>hello</div>');

方法2：使用insertBefore()方法 #

和before()逻辑类似，只是写法上把新元素放在前面：

// 创建新元素，然后插入到目标.time-widget的前面
$('<div>hello</div>').insertBefore($('#p_h_'+i+'_startHour_hour').closest('.time-widget'));

这两个方法都能帮你把<div>hello</div>准确插入到.time-widget的前方，而不是select的内部~

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