Question

我试图用insertBefore在另一个div上面插入一个div，到目前为止它的工作方式应该如此。但是，它推下了我试图将其插入上面的div，我想尽可能防止这种情况。这是我使用的代码和jsFiddle示例：

JS：

var innerDiv = document.getElementById('innerDiv');

function addButtons() {
    var buttons = document.createElement('div'),
        outerDiv = document.getElementById('outerDiv');

    buttons.innerHTML = '<input type="button" id="button" value="button" />';  

    outerDiv.insertBefore(buttons, outerDiv.childNodes[0]);        
}

innerDiv.onfocus = addButtons;

HTML：

<div id="outerDiv" class="outerDiv">
     <div id="innerDiv" contenteditable="true">Testing</div>
</div>

CSS：

.outerDiv {
    position: fixed;
    left: 100px;
    top: 100px;
}

jsFiddle Example

谢谢你的帮助

Answer 1

这很正常。由于outerDiv具有固定定位，因此它将保持其在屏幕上的当前位置，但其内容将根据正常布局算法流动。您在button之前插入了innerDiv，因此该按钮将成为outerDiv内的新第一个孩子，因此它会在outerDiv开头处占据一席之地。（你知道insertBefore在你正在调用方法的元素>中插入，之前你指定为第二个参数的子元素，右边？）

如果您希望新元素不影响布局，则应为其添加一些样式。 For example：

#button { position: absolute; top: -2em; }

Answer 2

尝试使innerDiv绝对定位： Demo

.innerDiv{
    position: absolute;
    top: 0px;
}

.outerDiv {
    position: fixed;
    left: 100px;
    top: 100px;
    padding-top: 30px;
}

Answer 3

我想说这是保持页面响应以及完成在id之上添加元素的最佳方式之一。

检查Fiddle

我在CSS中做了一些更改

.outerDiv {
    position: fixed;
    top: 80px;
    left: 100px;
}    

#innerDiv {
    position: fixed;
    top: 100px;
}

在.outerdiv被占用，#innerdiv位于.outerdiv的正下方。看起来我们正在ID上面添加一个元素，这是必需的。

insertBefore将元素向下推

3 个答案: