控制動態插入div的位置

我有一個頁面，其中一個div是由一些第三方javascript代碼動態插入的。我想將div放在另一個div中，但我無法控制它的插入。現在它被放置在頁腳下方。無論如何要把它放在正確的位置（在主容器div內）？下面是代碼和小提琴...控制動態插入div的位置

<body> 
<div id="header-nav"> 
    Some header stuff 
</div> 

<div id="main-container"> 
    This is where my div belongs 
</div> 

<div id="footer"> 
    Some footer stuff 
</div> 
<!-- this part is dynamically inserted when the page loads --> 
<div id="mydiv"> 
    I was inserted here but it is not my home 
</div> 
</body>

http://jsfiddle.net/jjaleel/h3d2j7yx/

我能夠覆蓋mydiv的CSS頁面上，我可以使用，或者一些其他的CSS的解決方案擺在正確的位置？

來源

2015-06-09 AbuMariam

了Java腳本添加到小提琴。我們需要看看究竟發生了什麼 –

哈哈沒有看到插入JavaScript的JavaScript，這很難排除故障或測試。 –

請檢查我的答案的複選標記，因爲它完全符合您的要求。 –

我修改了你的代碼。添加了一個邊框，以便您可以看到它正在工作。

http://jsfiddle.net/h3d2j7yx/1/

<body> 
    <div id="header-nav"> 
     Some header stuff 
    </div> 

    <div id="main-container" style="border:1px solid black;"> 
     This is where my div belongs 
    </div> 

    <div id="footer"> 
     Some footer stuff 
    </div> 

    <div id="mydiv"> 
     I was inserted here but it is not my home 
    </div> 
</body> 

<script> 

//Call the function to grab the div and insert it into the main div  
test(); 

function test() { 
if(document.getElementById('mydiv') != "undefined") 
    { 
    var element = document.getElementById('mydiv'); 
    document.getElementById('main-container').appendChild(element); 
     }  
} 
</script>

來源

2015-06-09 01:24:20

您的建議非常感謝，但並未完全解決我的問題，請參閱我對以下Saumil的回覆。謝謝。 – AbuMariam

不確定你的意思，請解釋我的例子沒有解決的問題。 –

我得到錯誤Node.appendChild的參數1不是一個對象。的document.getElementById（ '主容器'）的appendChild（元件）。因爲腳本觸發時mydiv元素似乎不存在。我猜，因爲它尚未被第三方js插入。 – AbuMariam

如果你無法控制div的位置，你可以把它放在任何你想要它放在後。

要追加動態創建的div包括下面的腳本在您的網頁，

function moveDiv(){ 
    var newDiv = document.getElementById("mydiv"); 
    var parent = document.getElementById("header-nav"); 
    parent.appendChild(newDiv); 
} 
moveDiv();

替換「頭，導航」與元素的ID。

這裏要考慮一個重要的事情是，上面的腳本應該放在第三方的JavaScript在產生動態的div下面，因爲如果這個腳本的第三方腳本之前執行則可能找不到元素由於它由第三方javascript生成，因此有id="mydiv"。

來源

2015-06-09 01:41:59

我認爲你是對的最後一點，但無論我在頁面上放置腳本的位置，我都會收到錯誤TypeError：Node.appendChild的參數1不是一個對象。的document.getElementById（ '主容器'）的appendChild（元件）。所以看起來我們的腳本總是在第三方插入該div之前發射。有什麼辦法可以強制它在火後？ – AbuMariam

@ user3223841上面的腳本首先觸發，可能是因爲它寫在HTML頁面中，而您的第三方腳本是外部腳本。你可以做的是創建另一個外部JS文件，並在其中複製上面的腳本。在導入時，請確保在新創建的外部文件之前導入第三方腳本。 –

如果您使用javascript插入，請始終使用javascript進行最佳操作。因此，例如，我們可以創建這樣一個元素：

var div = document.createElement("DIV"); //creates a javscript DIV element 
div.className("dynamic-div"); //sets a class name <div class="dynamic-div"> 
div.innerHTML = "This is a div, but is not my home or whatever"; //add some text 
document.body.appendChild(div); //adds the javascript element as an HTML element

，然後我們可以預加載CSS：

.dynamic-div { 
    background-color: red; 
    position: fixed; 
}

記住，CSS將加載，但一旦顯示在元素屏幕上，CSS將採取行動並按照您想要的方式格式化所有內容。

所以一個函數被調用並且DIV被添加了已定義的類名，CSS將以您希望的方式接管並格式化對象。總是有CSS已經加載。它提供：

少的javascript工作
快了很多
將只用於
已經準備在開機時使用

來源

2015-06-09 02:03:34

控制動態插入div的位置

回答

相關問題