Javascript 如何在另一个div之前添加新div？_Javascript_Html

Javascript 如何在另一个div之前添加新div？

javascript html

Javascript 如何在另一个div之前添加新div？,javascript,html,Javascript,Html,我想在body标记中的另一个div之前添加一个新div。我该怎么做 html <body class="variant-classic magazine notouch"> <div id="head" class="hfeed" tabindex="0"> <div id="header-container"> // other div areas </body> 错误 Uncaught NotFoundError: Fai

我想在body标记中的另一个div之前添加一个新div。我该怎么做

html

<body class="variant-classic magazine notouch">
   <div id="head" class="hfeed" tabindex="0">
   <div id="header-container">
   // other div areas
</body>

错误

 Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node': The       
 node before which the new node is to be inserted is not a child of this node.

首先，请关闭所有的div

看看这个

函数

.insertBefore（）

将应用于父元素

下面是片段

var parent=document.body；
var container=document.getElementById（'header-container'）；
var conn=document.createElement（'div'）；
conn.style.position='绝对'；
conn.style.float='左'；
conn.style.width='100%'；
conn.style.height='50px'；
conn.style.background='灰色'；
parent.insertBefore（conn，container）

//其他分区

富吧
//创建一个新的普通元素
var sp1=document.createElement（“span”）；
//在插入元素之前，获取对元素的引用
var sp2=document.getElementById（“childElement”）；
//获取对父元素的引用
var parentDiv=sp2.parentNode；
//在sp2之前将新元素插入DOM
parentDiv.insertBefore（sp1，sp2）；
< /代码> 如果您想<强>在父节点的第一个子节点< /强>之前插入一组节点对象或DOMSTROM对象，您可以考虑使用：
parentElement.prepend(newFirstChild);

在您的情况下，它将是：
    var container = document.getElementById('header-container');
    var conn = document.createElement('div');

    conn.style.position = 'absolute';
    conn.style.float = 'left';
    conn.style.width = '100%';
    conn.style.height = '50px';
    conn.style.background = 'gray';

    container.prepend(conn);

这是ES7中新增的一项功能。它目前可以在Chrome、FireFox和Opera中使用
运输机应该能够处理它，直到它变得无处不在
更多信息：
希望对你有帮助
@ᔕᖺᘎᕊ 抱歉，输入错误。元素不能是它自己的子元素。第二个参数是要在其前面添加新元素的引用元素，它必须是具有调用的insertBefore
方法的元素的子元素。在您的情况下，您可能需要document.body.insertBefore（conn，container）
@Teemu那么，如何在另一个div之前添加新div？在Google blogger code中，body没有id。如何修复此问题？它变得更加容易var parent=document.body。我已经更新了我的答案。上面的内容对理解insertBefore（）有意义吗？
var txt3 = document.createElement("div");  

txt3.style.position='absolute';
txt3.style.float='left';
txt3.style.width='100%';
txt3.style.height='50px';
txt3.style.background='gray';

 $( "#head" ).wrap( txt3 );

    var container = document.getElementById('header-container');
    var conn = document.createElement('div');

    conn.style.position = 'absolute';
    conn.style.float = 'left';
    conn.style.width = '100%';
    conn.style.height = '50px';
    conn.style.background = 'gray';

    container.prepend(conn);

var txt3 = document.createElement("div");  

txt3.style.position='absolute';
txt3.style.float='left';
txt3.style.width='100%';
txt3.style.height='50px';
txt3.style.background='gray';

 $( "#head" ).wrap( txt3 );