如何使附加的孩子出现在网页正文标签下面的所有div之上
如何使附加的孩子出现在网页正文标签下面的所有div之上
提问于 2022-05-23 23:15:37
var data = "Mike, Henry, Pete";
data = data.replaceAll(" ", "");
var data_array = data.split(',');
var newArr = data_array.map(x => 'Name: ' + x);
var item = newArr[Math.floor(Math.random()*newArr.length)];
var heading = document.createElement('h1');
heading.textContent = item;
document.body.appendChild(heading);h1出现在页面上其他div下面。(出现在页面底部)如何使它出现在顶部，就在带有javascript的开始正文标记下面？
回答 1
Stack Overflow用户
发布于 2022-05-23 23:25:50
解决方案1
您可以尝试使用Node.insertBefore()。
试着做这样的事情：
var heading = document.createElement('h1');
heading.textContent = item;
document.body.insertBefore(heading, document.body.childNodes[0]); // This here...在这里，您基本上是在第一个heading childNode of <body>之前插入<body>元素。这可能会抛出，您需要确保<body>有子元素，这样document.body.childNodes就不会没有定义，或者您只需要使用document.body.firstChild而不是document.body.childNodes[0]。
您可以阅读更多关于Node.insertBefore()的信息。
下面是一个例子：
function insertHeading(){
var heading = document.createElement('h1');
heading.textContent = "I am the Missing Heading.";
document.body.insertBefore(heading, document.body.firstChild);
}<body>
<p>I am a paragrapth that belongs to an article. But my heading is missing.</p>
<p>I am a sister paragraph that belongs to a missing header.</p>
<button onClick="insertHeading()">Insert heading</button>
</body>
解决方案2
使用Element.prepend()
-- Element.prepend()方法在元素的第一个子元素之前插入一组Node对象或字符串对象。
在本例中，document.body是您的Element。您可以像这样追加heading document.body.prepend(heading)。
您可以阅读更多关于.prepend()的内容。但是这个解决方案缺乏浏览器支持。它在IE上根本不可用。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72355673
复制相关文章
相似问题
腾讯云开发者
