Question

我尝试关注维基并在此处查看多个问题，但我仍然遇到insertBefore的问题..

这是我的样本：

<div id="container">
 <span id="first">1</span>
 <span id="second">2</span>
 <div id="third">3</div>
 <div id="forth">4</div>
</div>

<script>
topbar = document.getElementsById("container");
boardlist = document.getElementsById("first");

bmcontainer = document.createElement("span");
bmcontainer.setAttribute("id", "zero");
bmcontainer.innerHTML("0");

topbar.inserBefore(bmcontainer, boardlist);
</script>

我想在span＃first之前追加跨度#zer。我究竟做错了什么？我正在尝试不使用jQuery，所以我正在寻找一个完全javascript的解决方案。

Answer 1

预装纯正版javascript

MDN article on insertBefore()

var el = document.getElementById('thingy'),
    elChild = document.createElement('div');
elChild.innerHTML = 'Content';

// Prepend it
el.insertBefore(elChild, el.firstChild);

来源：http://clubmate.fi/append-and-prepend-elements-with-pure-javascript/#Prepend

此外，jQuery prepend（）方法

您可以阅读here和here。

Answer 2

Node.insertBefore()就是答案。

var insertedNode = parentNode.insertBefore(newNode, referenceNode);

如果您有Parent Node，则应使用ParentNode.prepend()

ParentNode.prepend(nodesToPrepend);

看看@提到的链接，了解完整的文档和示例。

<强>更新

您的代码中存在一些问题（错误以及innerHTML 的错误用法），这里是固定代码。

<强> HTML

<div id="container">
    <span id="first">1</span>
    <span id="second">2</span>
    <div id="third">3</div>
    <div id="forth">4</div>
</div>

<强> JS

var topbar = document.getElementById("container"),
    boardlist = document.getElementById("first"),
    bmcontainer = document.createElement("span");

bmcontainer.setAttribute("id", "zero");   
bmcontainer.innerHTML = "0"; // innerHTML is not a function, it's a property

topbar.insertBefore(bmcontainer, boardlist);

jsfiddle

请注意，InnerHTML 不是 function，而是property，请在此处详细了解：Element.innerHTML

Answer 3

您可以使用insertAdjacentElement函数。

var boardlist = document.getElementById("first"),
    bmcontainer = document.createElement("span");
    bmcontainer.setAttribute("id", "zero");

    boardlist.insertAdjacentElement('beforebegin', bmcontainer);

Element.insertAdjacentElement

如何使用Javascript将元素追加到另一个元素之前？

3 个答案: