我怎么添加一个div容器一个网页的特定区域吗?

Question

我问这个问题是因为我发现的所有其他答案都与JQuery有关。我没有使用JQuery，只是纯JS。

目前我创建一个div并使用create Element和innerHTML向div中添加内容。然后在文档主体上使用appendChild将HTML添加到文档中。问题是，注入的HTML是在正文的最底部，但我希望它在顶部。

我该怎么做?

编辑:我的代码:

// Content-Script Function: This function toggles the extention on and fetches the required resources from the server.
function toggleExtOn() {  
//Get url for the html page.
let url = chrome.runtime.getURL("flipfinder.html");
//Create the container.
var flipfinderContainer = document.createElement('div');
//Set the id.
flipfinderContainer.setAttribute("id", "flipfinderContainer");
//Add the html to the div using iframe.
flipfinderContainer.innerHTML = "<h1>Hello</h1>";
//Append the div to the pages html body.
document.body.appendChild(flipfinderContainer);
}

Answer 1

您可以使用prepend函数将元素添加到div中。前置类似于追加，但它添加到开始而不是结束。

例如:

const element = document.createElement("img");
document.body.prepend(element);

Answer 2

代替总是加到结尾的.appendChild()，您可以使用.prependChild()并在body之前添加div。