无法在jQuery中（两者）之前和之后插入元素

Question

我正在使用 jQuery 3.x。我正在尝试使用insertBefore() 和insertAfter() 在元素之前和之后附加一个动态创建的元素。但是，只有insertBefore() 工作，而另一个被忽略。当我评论一个时，另一个正在工作。为什么？

p = $("<p></p>").text("This is a dynamicly created element");
p.insertAfter($('nav'));
p.insertBefore($('nav'));

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 20px;
}

header,
nav,
main,
aside,
footer {
  padding: 10px 15px;
  border: 1px solid mediumseagreen;
  text-align: center;
}

header {
  background: dodgerBlue;
}

nav {
  background: mediumSeaGreen;
}

main {
  background: #d3d3d3;
}

main,
aside {
  height: 1200px;
}

main {
  width: 80%;
  float: left;
}

aside {
  width: 20%;
  float: right;
}

div::after {
  content: " ";
  float: none;
  clear: both;
  display: table;
}

main {
  text-align: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  This is header
</header>

<nav>
  This is navbar
</nav>

<main>
  <article>
    <h2>This is heading</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum atque fuga, eos neque ipsum enim id inventore necessitatibus laboriosam quo nobis, repellendus maxime veritatis error ut expedita, velit aspernatur asperiores!
    </p>
  </article>
</main>

<aside>
  This is side bar
</aside>
<div></div>
<footer>
  This is <a href="http://">footer</a>
</footer>

Answer 1

问题是因为p 仅引用单个元素。在 insertAfter() 调用中将其插入到 DOM 中，然后使用 insertBefore() 将同一元素移动到新位置。

要执行您需要的操作，您可以在第二次插入之前clone() 元素。另请注意，您不需要创建整个 jQuery 对象来选择nav，您可以将选择器作为字符串传递。试试这个：

let p = $("<p />", { 
  text: "This is a dynamicly created element"
});
p.insertAfter('nav');
p.clone().insertBefore('nav');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 20px;
}

header,
nav,
main,
aside,
footer {
  padding: 10px 15px;
  border: 1px solid mediumseagreen;
  text-align: center;
}

header {
  background: dodgerBlue;
}

nav {
  background: mediumSeaGreen;
}

main {
  background: #d3d3d3;
}

main,
aside {
  height: 1200px;
}

main {
  width: 80%;
  float: left;
}

aside {
  width: 20%;
  float: right;
}

div::after {
  content: " ";
  float: none;
  clear: both;
  display: table;
}

main {
  text-align: left;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>This is header</header>
<nav>This is navbar</nav>
<main>
  <article>
    <h2>This is heading</h2>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum atque fuga, eos neque ipsum enim id inventore necessitatibus laboriosam quo nobis, repellendus maxime veritatis error ut expedita, velit aspernatur asperiores!
    </p>
  </article>
</main>

<aside>This is side bar</aside>
<div></div>
<footer>This is <a href="http://">footer</a></footer>

还有一点需要提一下，我建议研究一下 flexbox 布局。与强制 display: table 在 div 上创建多列布局相比，它们是一种更现代且可扩展的技术。