不带ID的前置Div集合

Question

我正在尝试在具有相同类但在使用javascript的HTML文档中没有ID的Div的集合中添加第一个Div。他们的父母也没有身份证。

<div class="shiftsListParent">
<div class="shiftsList2"></div>
<div class="shiftsList2"></div>
</div>

我希望得到一个看起来像

的结果

<div class="shiftsListParent">
<div class="shiftsList2">New Div Here</div>
<div class="shiftsList2"></div>
<div class="shiftsList2"></div>
</div>

Answer 1

document.querySelector将返回与CSS选择器匹配的第一个元素，然后您可以在该元素的父级上使用insertBefore：

var div = document.querySelector(".shiftsList2");
var newDiv = document.createElement("div");
newDiv.innerHTML = "New Div Here";
div.parentNode.insertBefore(newDiv, div);

直播示例：

＆＃13;

＆＃13;

var div = document.querySelector(".shiftsList2");
var newDiv = document.createElement("div");
newDiv.innerHTML = "New Div Here";
div.parentNode.insertBefore(newDiv, div);

＆＃13;

<div class="shiftsListParent">
<div class="shiftsList2">original first</div>
<div class="shiftsList2">original second</div>
</div>

＆＃13;

＆＃13;

＆＃13;