logo标签列表

JavaScript将div移动到标签末尾</body>

javascript
9
如何将div移动到标签结束body </body>之前。我正在使用openx，我无法更改div内容，因为内容归其他人所有。我只是放置来自openx的javascript代码，以便获取横幅。我将代码放在标签<body>之后，在内容中的任何标签之前。
我的问题是，当我放置来自openx的javascript代码以生成横幅时，我会得到两个并列的div，其中横幅位于<div id="div1">和<div id="div2">下面的标签<body>中，我想让<div id="div1">出现在标签开始body <body>之后，在内容中的任何标签之前。并且<div id="div2">在标签结束body </body>之前，在任何标签之后。
这是我从openx获得的html：
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div id="div1"><img src="blablabla" /></div>
        <div id="div2"><img src="blablabla" /></div>
        Here is content other div id or div class,
        I not define example insert after div id footer
        Because this is content owned by others.
        This is justexample content.
    </body>
</html>

我希望你能将其转换为以下格式：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div id="div1"><img src="blablabla" /></div>
        Here is content other div id or div class,
        I not define, example insert after div id footer
        Because this is content owned by others.
        This is justexample content.
        <div id="div2"><img src="blablabla" /></div>
    </body>
</html>

因为我想把横幅一放在内容上方，把横幅二放在内容下方。我不想使用CSS的position: fixed。
所以，能否将div标签移动到body结束标签之前呢？ 如果可以，请帮我编写JavaScript代码来实现它。
谢谢。
2个回答
21

简单的纯JavaScript：

document.body.appendChild(document.getElementById('div2'));

要移动节点，只需使用appendChild方法。

这里有一个演示：http://jsfiddle.net/6GsbB/

嗨，感谢您的回复。我在控制台日志中遇到了错误：上述代码中出现了未捕获的错误：NotFoundError: DOM Exception 8。 - Loren Ramly
它对你不起作用，因为 document.getElementById('div2') 返回了 null。确保你传递了正确的 id 并且你的 HTML 中 实际上 有它。 - dfsq
哈哈哈，我习惯使用jQuery，所以总是使用上面的代码。现在你的代码已经解决了问题。谢谢啊。 - Loren Ramly
4

可以。您可以使用这种方法，但是需要jQuery。

a = $("#div2").clone();
$("#div2").remove();
$("body").append(a);

Fiddle: http://jsfiddle.net/praveenscience/zc8Ze/

使用纯JavaScript方法。

var a = document.getElementById("div2");
document.body.appendChild(a);

Fiddle: http://jsfiddle.net/praveenscience/zc8Ze/1/

从评论中得知，这可以通过以下方式更有效率地实现，由dfsq提供：

document.body.appendChild(document.getElementById('div2'));
1
OP没有要求使用jQuery...我希望你不会建议他下载、评估一个80kb的库，只是为了使用 appendChild？ - rgthree
你好，感谢回复。有没有不用jQuery的方法呢？因为这会在其他网站上生成代码，而这些网站是由其他人拥有的，如果这些网站没有引入jQuery怎么办呢？谢谢。 - Loren Ramly
@LorenRamly 好的，我也会提供 JavaScript 版本。 - Praveen Kumar Purushothaman
1
@PraveenKumar 没问题，我现在就把它删掉 ;) 还有，你不需要创建两个引用并调用 removeChild。 我个人更喜欢 @dfsq 的答案。 - rgthree
1
无论如何，你的代码是正确的，我会给你+1。再加上jQuery版本。 - dfsq
显示剩余10条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接