Question

我想在下面给出的场景中在父div的第二个子节点之后添加一个新元素（div）。

<div id="parent"><!--Parent Div -->
  <div><!--Child 1st-->
    <div> foo  </div>
    <div> foo1 <div>
    <div> foo2 </div>
  </div>
  <!--Want to insert in here-->
<div>

我尝试使用nth-child(2)使用.after访问带有id的父级，但创建的新元素会插入<div>foo</div>

我无法找到解决方案请帮忙。

Answer 1

仅使用#parent选择#parent > div的直接子div，因为#parent div在这里过于通用，它将获得所有多级子div是#parent，像这样：

请注意，您在<div> foo1 <div>处使用开头的div标签来关闭div，而不是关闭标记</div>

<强> jsFiddle

$('<div class="new">Newly inserted</div>').insertAfter('#parent > div:first-child');

#parent{outline:1px dashed red; padding:10px;}
#parent > div:first-child{outline:1px dotted blue; margin:5px; padding:5px;}
.new{ font-weight:bold; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="parent">
  <!--Parent Div -->
  <div>
    <!--Child 1st-->
    <div>foo</div>
    <div>foo1</div>
    <div>foo2</div>
  </div>
  <!--Want to insert in here-->
  <div>something else</div>
  <div>test div</div>
  <div>

Answer 2

假设parent引用父元素而element是您要插入的元素：

secondChildren = null;
if(parent.children.length > 1){
    secondChildren = parent.children[1];
}
parent.insertBefore(element, secondChildren);

访问父div的第二个孩子。在嵌套的DIV场景中

2 个答案: