javascript - 使用javascript添加之前和之后

Question

我想知道如何在某些元素之前和之后添加 html 元素例如:这是我在实际文件中添加的代码。

<ul class="abcd" id="abcd></ul>

那么我怎样才能像这样显示它(使用javascript)；

<div class="blabla">
<div class="ABCD">
   <ul class="abcd" id="abcd></ul>
</div>
</div>

Answer 1

var yourVar; // some  DOM instance
var newFirstElem; //element which should be first in yourVar

yourVar.insertBefore(newFirstElem, yourVar.firstChild);

这将添加为第一个子项。只需使用普通附加即可添加。

编辑:

假设你一开始就有这个:

  <div class="blabla">
     <div class="ABCD">

     </div>
  </div>

你想添加 <ul class="abcd" id="abcd></ul>与类 ABCD 进行 div

$(".ABCD").append('<ul class="abcd" id="abcd></ul>')

你想添加到带有 blabla 类的 div

$(".blabla").append('<ul class="abcd" id="abcd></ul>')

考虑一下你已经有了这个

<div class="blabla">
         <div class="ABCD">
             <ul class="abcd" id="abcd></ul>
         </div>
      </div>

现在你想在 div 中的 ul 之前添加 abcd 类

$(".abcd").prepend("<ul class="abcd" id="abcd></ul>");

jQuery 使事情变得更简单。您可以只使用前置功能。此功能允许您在开头插入任何您喜欢的内容。还可以选择在特定位置插入。您应该看一下:

insertAt

insertBefore

after

before