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>

你要添加 {AB}等级<ul class="abcd" id="abcd></ul>

$(".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中使用类abcd

之前添加ul

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

jQuery使它更简单。你可以使用prepend函数。此功能允许您在开头插入任何您喜欢的内容。还可以选择插入特定位置。你应该看看：

insertAt

insertBefore

after

before

Answer 2

如果你有像这样的html文件

<html>
<body>
<ul id="1"></ul>
</body>

你这是什么

<html>
<head></head>
<body>
    <div>
        <ul id="1"></ul>
    </div>
</body>

使用此javascript

var x = document.getElementsByTagName("body")[0];
var b = document.getElementById("1");
var a = document.createElement("div");
x.appendChild(a);
a.appendChild(b);

Answer 3

我希望这是您正在寻找的代码..

<!doctype>
<html>
    <head>
        <title>Example - Javascript - Add element before/after</title>
        <script language="javascript">
        function mAddBegin()
        {
            var tNew = document.createElement('li');
            tNew.innerHTML = document.getElementById('value').value;

            var tList = document.getElementById('list');
            tList.insertBefore(tNew, tList.firstChild);
        }
        function mAddBefore()
        {
            var tNew = document.createElement('li');
            tNew.innerHTML = document.getElementById('value').value;

            var tList = document.getElementById('list');
            var tTea = document.getElementById('tea');
            tList.insertBefore(tNew, tTea);
        }
        function mAddAfter()
        {
            var tNew = document.createElement('li');
            tNew.innerHTML = document.getElementById('value').value;

            var tList = document.getElementById('list');
            var tTea = document.getElementById('tea');
            tList.insertBefore(tNew, tTea.nextSibling);
        }
        function mAddEnd()
        {
            var tNew = document.createElement('li');
            tNew.innerHTML = document.getElementById('value').value;

            var tList = document.getElementById('list');
            tList.appendChild(tNew);
        }
        </script>
    </head>
    <body>
        <ul id="list">
           <li>Coffee</li>
           <li id="tea">Tea</li>
           <li>Milk</li>
        </ul>
        <input type="text" id="value" />
        <input type="button" onclick="javascript: mAddBegin(); " value="Add begin" />
        <input type="button" onclick="javascript: mAddBefore(); " value="Add before 'Tea'" />
        <input type="button" onclick="javascript: mAddAfter();" value="Add after 'Tea'" />
        <input type="button" onclick="javascript: mAddEnd();" value="Add end" />
    </body>
</html>

使用javascript之前和之后添加

3 个答案: