logo标签列表

使用jQuery将元素添加到页面顶部

javascriptjquery
11

现在Facebook希望我将这个丑陋的

标签放到我的页面顶部，紧接着标签。

<div id="fb-root"></div>

我希望通过JavaScript追加它来避免这种情况。

.append('<div id="fb-root"></div>');

这将把它放在页面底部。

</head>
<body>
    <header>test</header>
    <div id="fb-root"></div>
</body>

如何将它添加到顶部？

</head>
<body>
    <div id="fb-root"></div>
    <header>test</header>
</body>
可能是重复的问题：javascript：如何将div附加在另一个div的“开头”？ - Felix Kling
我很好奇 - 你为什么想要通过JavaScript来做这件事？无论如何，该元素最终都会出现在您的DOM /标记中。 - jamauss
@jamauss，我可以将其放入DOM以进行进一步操作；但是我不希望它出现在我的“header”标签前面。我坚信遵循W3C结构标准。 - O P
这仍然没有真正解释为什么你想通过 JavaScript 来实现它，而不是手动将其放入文档中。为什么你不能在没有 JavaScript 的情况下将其放置到想要的位置？ - jamauss
@jamauss，我可以将它放在任何想要的位置而不使用JavaScript。我想使用JavaScript来完成它，以便不会干扰我完美的HTML结构。 - O P
啊，好的。那我想我明白了。 - jamauss
3个回答
31

使用 prepend 方法：

$('body').prepend('<div id="fb-root"></div>');
IE或Edge不支持prepend。 - Longblog
1
您可以使用

标签

。
$('#fb-root').detach().insertBefore('body>*:first');
-3

您可以不使用JQuery和prepend来完成此操作

<body>
    <header>test</header>
</body>
<script>
    document.body = '<div id="fb-root"></div>' + document.body + "</div>";
</script>
2
“你可以不使用JQuery和prepend来实现这个功能” - 真的：你可以使用 document.body.prepend(Object.assign(document.createElement("div"), { id: "fb-root" }));。重写 <body> 会破坏绑定到它上面的所有事件监听器，并且DOM的那一部分必须被重新解析，所以不要这样做。请参见 Is it possible to append to innerHTML without destroying descendants' event listeners?。 - Sebastian Simon
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接