Question

我想在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>

我写的剧本

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.insertBefore(conn, container);

错误

 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.

Answer 1

首先，请关闭所有 div 。

查看此fiddle。

函数.insertBefore()将应用于父元素。

以下是摘录。

＆＃13;

var parent = document.body;
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';

parent.insertBefore(conn, container);

＆＃13;

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

＆＃13;

插入新// other div areas后，div文字无法显示，因为您已设置position=absolute，因此文字隐藏在div后面。

Answer 2

<div id="parentElement">
  <span id="childElement">foo bar</span>
</div>

<script>
// Create a new, plain <span> element
var sp1 = document.createElement("span");

// Get a reference to the element, before we want to insert the element
var sp2 = document.getElementById("childElement");
// Get a reference to the parent element
var parentDiv = sp2.parentNode;

// Insert the new element into the DOM before sp2
parentDiv.insertBefore(sp1, sp2);
</script>

Answer 3

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 );

Answer 4

如果您希望在父节点的第一个孩子之前插入一组Node对象或DOMString对象，您可以考虑使用：

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。

运营商应该能够处理它，直到它随处可用。

更多信息：Link

希望它有所帮助...

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

4 个答案: