Question

我有一个页面，div通过某些第三方javascript代码动态插入。我想将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解决方案放在正确的位置吗？

Answer 1

我修改了你的代码。添加了边框，以便您可以看到它正常工作。

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>

Answer 2

如果您无法控制div的位置，可以在放置div之后将其放置在任何位置。

在您的页面中包含以下脚本

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

用要添加动态创建的div的元素ID替换“header-nav”。

这里需要考虑的一件重要事情是上面的脚本应该放在生成动态div的第三方javascript下面，因为如果这个脚本在第三方脚本之前执行那么它可能会找不到具有id="mydiv"的元素，因为它是由第三方javascript生成的。

Answer 3

如果您使用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工作
快得多
仅在/需要时使用
已准备好在启动时使用

控制动态插入div的位置

3 个答案: