insertBefore將元素向下推

-1

我想用insertBefore在另一個div上插入一個div，到目前爲止它的工作方式應該是這樣。然而，它推低了我試圖插入上面的div，如果可能的話，我想阻止它。下面是我使用連同的jsfiddle例子代碼：insertBefore將元素向下推

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

三江源爲你的幫助

來源

2013-01-03 tdub2012

問題是您正在添加到包含innerDiv的容器中，因此預計會下推。給按鈕一個負邊距（高度：Npx; margin-top：-Npx）或重新考慮你是如何做到這一點的。 – rlemon

你是否只想在ID上添加一個元素或數量的元素？ –

我只想在ID上添加一個元素 – tdub2012

這是正常的。由於outerDiv具有固定的位置，它將保持其當前位置在屏幕上，但其內容將按照正常佈局算法流動。您在innerDiv之前插入button，因此該按鈕將成爲outerDiv中的新的第一個孩子，因此它將在outerDiv的開頭處位置正確。（你知道，insertBefore插入內的元素，你正在調用方法，您指定爲第二個參數的子元素之前，對吧？）

如果你想在新的元素不影響佈局，你應該添加一些樣式。 For example：

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

來源

2013-01-03 04:36:49

添加頂部：-2em;是不可取的，因爲它可能會影響響應.. –

我覺得這是正常的，只是不知道如何解決它。該工作，謝謝你 – tdub2012

它會如何影響響應能力？ – tdub2012

嘗試使innerDiv絕對定位：Demo

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

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

來源

2013-01-03 04:43:56

插入div下面的按鈕，這不是我正在尋找的。 – tdub2012

如果你不想填充，從outerDiv類中刪除padding-top屬性 –

我會說，這是其將保持頁面響應以及履行加入元素的最佳途徑之一在身份證上方。

檢查Fiddle

我曾在CSS

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

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

一些變化在哪裏.outerdiv吸收和#innerdiv放置只是.outerdiv下方。看起來好像我們在ID的上面添加了一個元素，這就是所需要的。

來源

2013-01-03 05:05:05

對不起，我沒有意識到你開始問什麼，我真正想要做的是在div下面添加一個按鈕，然後將這個方法拋出一點點 – tdub2012

U想要按鈕在ID上方和下方，對嗎？你需要多少個這樣的按鈕？或者只需要上下一個按鈕 –

下面會有三到五個按鈕，但它們全都在同一行。 – tdub2012

insertBefore將元素向下推

回答

相關問題