从<body>获取第一个元素然后insertBefore()
()是一种在前端开发中常用的操作，用于将一个元素插入到另一个元素之前。
具体步骤如下：
- 首先，通过document对象的querySelector方法获取到<body>元素，可以使用如下代码：var bodyElement = document.querySelector('body');
- 接下来，通过bodyElement的firstElementChild属性获取到<body>元素的第一个子元素，即要插入的元素，可以使用如下代码：var firstElement = bodyElement.firstElementChild;
- 最后，通过parentNode.insertBefore()方法将要插入的元素插入到目标元素之前，可以使用如下代码：var targetElement = document.getElementById('target'); // 假设目标元素的id为target targetElement.parentNode.insertBefore(firstElement, targetElement);
这样，就可以将第一个元素插入到目标元素之前。
这种操作在前端开发中常用于动态添加或移动元素的位置，例如在页面加载完成后，将某个元素移动到另一个位置，或者将新创建的元素插入到指定位置等。
在腾讯云的产品中，与前端开发相关的产品有云服务器（CVM）、云函数（SCF）、云存储（COS）等。具体产品介绍和链接如下：
- 云服务器（CVM）：提供可扩展的计算能力，支持多种操作系统和应用场景。了解更多：腾讯云服务器（CVM）
- 云函数（SCF）：无服务器函数计算服务，可实现按需运行代码，无需管理服务器。了解更多：腾讯云函数（SCF）
- 云存储（COS）：提供安全、稳定、低成本的对象存储服务，适用于各种场景的数据存储和处理需求。了解更多：腾讯云存储（COS）
以上是腾讯云提供的一些与前端开发相关的产品，可以根据具体需求选择适合的产品进行开发和部署。
相关·内容
我试图在js中使用insertBefore，如下所示：
var p = document.createElement("p");
p.innerHTML = "test1";
document.body.insertBefore(p, null);
var p = document.createElement("p");
p.innerHTML = "test2";
document.body.insertBefore(p, null);
但是，这会在body标记结束之前添加最后一个p元素，我如何使用它，以便在打开时将其添加到顶
浏览 4提问于2011-05-16得票数 57
回答已采纳
我试图在环绕主体的元素之前插入一个元素，但得到以下内容
Uncaught :无法读取null的属性“insertBefore”
document.querySelector( 'body' ).innerHTML = '<div id="boat">' + document.querySelector( 'body' ).innerHTML + '</div>';
var sailor = document.createElement( 'aside' );
sail
浏览 1提问于2021-01-09得票数 0
回答已采纳
我正在开发支持聊天网站，我想将ajax html的响应附加到body tag的内部html之后。 例如:在h2标签后附加html (这里是网页的html )。 function insertAfter(referenceNode, newNode) {
referenceNode.parentNode.insertBefore(newNode,referenceNode.nextSibling);
}
var el = document.createEleme
浏览 18提问于2019-12-09得票数 0
回答已采纳
我有一个html表单，我想添加输入字段使用javascript。最初，我把输入字段放在'body‘下面，下面的代码可以添加这些字段：
// Create number input field
var phoneInput = document.createElement("INPUT");
phoneInput.id = "phone" + instance;
phoneInput.name = "phone" + instance;
浏览 0提问于2009-12-23得票数 1
回答已采纳
这是我的html：
<html><body>
page starts here
this is a test page
top:
<script id="invoc_code" type="text/javascript">
window.onload = function() {
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
浏览 9提问于2013-12-18得票数 0
回答已采纳
我不认为我可以使用insertBefore()，因为我不知道DOM中的第一个元素是什么。
编辑：
我正在尝试插入body标签(即<body>)。
浏览 0提问于2011-08-23得票数 3
回答已采纳
我想在<body>的末尾插入一个段落元素<p>，就在</body>之前。
我尝试过insertBefore()，如下所示，但它不能像预期的那样工作。
$( "<p>Test</p>" ).insertBefore( "</body>" );
浏览 1提问于2015-07-21得票数 3
例如，有以下页面：
<html>
<head>
<style>
.a {
background-color: red;
}
.b {
background-color: yellow;
}
</style>
</head>
<body>
<div class="a">123</div>
<div>456</div>
<
浏览 1提问于2016-07-12得票数 1
我多次尝试将相同的元素添加到HTML文档中，但是它不起作用，我不知道原因。守则如下：
<html>
<body>
<div>Very</div>
<div>Secret</div>
<script>
var elem = document.createElement('div')
elem.innerHTML = '**Child**'
document.body.insertBefore(elem,document.body.lastChild);
docu
浏览 4提问于2014-11-11得票数 4
回答已采纳
我有一个带有3段和一个按钮的html页面。在我的JavaScript文件中，我创建了一个函数，每次按下按钮，就会向页面添加3个新段落。这3个新段落应该是现有段落的副本，但每一次都以随机顺序添加。这是我的功能
const body = document.querySelector("#body");
const paragraphs = document.querySelector(".paragraph");
const btnHitMe = document.querySelector("#btn");
const addParagraphs
浏览 3提问于2021-12-06得票数 0
回答已采纳
我正在使用谷歌地图和geoserver创建一个应用程序。我在谷歌地图上将这些图层叠加成png。现在，我要做的是得到的图层信息，根据拉特长的位置。
是否可以使用地理位置的长时间从geoserver获取图层信息？是否可能在google地图上显示来自geoserver的向量块？
关于第1点
bbox
{
minx: 72.24619317700001,
miny: -67.013055426,
maxx: 167.97283888699997,
maxy: -9.799550450000027
}
if( bb.minx <= body.lat && body
浏览 4提问于2020-09-28得票数 0
我使用下面的代码来包装<p>而不是<div>。
document.execCommand('defaultParagraphSeparator', false, 'p')
但我还是不能把第一行包装成这样的"aaa“。
<div id=“body-text” class=“body-text” contenteditable=“true” data-placeholder=“Body Contents">
aaa
<p>bbb</p>
<p>ccc<
浏览 6提问于2016-10-03得票数 2
1回答
我试图创建一个显示和消失的效果与输入。当单选按钮为“否”时，应显示该项。当单选按钮为“是”时，项目应消失。到目前为止，我已经将该项目显示出来，但无法通过DOM将其删除。我已经包括了我的例子，我如何可以删除我的电子邮件，我评论了，但似乎不能删除innerHTML或输入。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
function myFunction() {
var label = docume
浏览 1提问于2015-10-06得票数 1
回答已采纳
3回答
我有一个HTML的有序列表。
<ol class="btns">
<li>First item</li>
<li>Second item</li>
<!--Third one goes here-->
<li>Four item</li>
</ol>
我想添加一个新的列表项目与js到第三阶。我怎么能这么做？
下面是演示：
更多信息：appendChild向列表的末尾添加了新项目，我尝试了insertBefore，但失败了，只有insertBefore才能把
浏览 3提问于2012-12-26得票数 2
回答已采纳
2回答
我有一个简单的jQuery问题。
为什么我不能这么做呢？
$("<div class='flora'></div>").insertBefore('</body>');
我只想在HTML页面的末尾添加一个新的div。所以我想我应该使用.insertBefore方法，但是jQuery似乎不喜欢以</body>标记为目标。
有什么想法？
谢谢!
浏览 1提问于2009-06-21得票数 2
回答已采纳
我遇到了一个问题，就是匹配的结束标记要迁移到它的对上，而不是按照我列出的语句的顺序包装内容。我不知道这种事是怎么发生的。联合材料的职能：
$('.add-contributor-button').click(function(){
$("<input type=\"text\" name=\"contributor\">").insertBefore('.add-contributor-button');
$("<select>").insertBefore('.
浏览 0提问于2017-01-19得票数 0
回答已采纳
我正在尝试在目标div之前和之后编写一个新的dom元素。这段代码只适用于其中一个，但不能同时适用于两个。
function addElement () {
var newDiv = document.createElement("div");
var newContent = document.createTextNode("This is a new text node.");
newDiv.appendChild(newContent);
var currentDiv = document.querySelector(&#
浏览 2提问于2017-09-14得票数 0
2回答
我正在制作另一个版本的音乐播放器，并想进行一些升级。我准备编写一些代码，在变量中创建所有所需的元素，这些变量将用作具有歌曲名称、作者和相册的数据库。
const elements = {
"song": {
"name": "songname",
"author": "songauthor",
"album": "songalbum"
}
};
因此，我在一个创建具有指定值的div的网站上复制了一些代码。
function addElement (el
浏览 4提问于2021-11-04得票数 0
回答已采纳
如何使用当前元素标记在JavaScript中获取元素的HTML代码？
例如
<body><div><div class="big"><p>sometext</p></div></div></body>
var x = document.getElementsByClassName('big')[0]
现在我想得到x的HTML代码：
'<div class="big"><p>sometext</p></
浏览 3提问于2015-03-16得票数 0
回答已采纳
在使用以下语法时，不必繁琐地搜索每种类型的属性和事件的解决方法：
elem = document.createElement("div");
elem.id = 'myID';
elem.innerHTML = ' my Text '
document.body.insertBefore(elem,document.body.childNodes[0]);
有没有一种方法可以将整个HTML元素声明为一个字符串？像这样：
elem = document.createElement("<div id='myID'>
浏览 138提问于2009-05-02得票数 108
回答已采纳
基本上，当我尝试使用php从RSS feed向XML文件添加多个项目时，insertBefore类以错误的方式添加最新的项目(即，我希望它将它们添加到文件的顶部，从最旧到最新，但它却将它们从最新到最旧的顺序添加)，我该如何解决这个问题？(很抱歉措辞很糟糕)下面是我的代码：
$dom = new DOMDocument;
$dom->formatOutput = true;
$dom->preserveWhiteSpace = false;
$dom->load(myfile);
$channel = $dom->getElementsByTagName('
浏览 1提问于2013-04-01得票数 0
如果我用..。
var elm = document.createElement("p");
document.body.insertBefore( elm, document.body.firstChild );
我在每个身体元素里都有这个p元素！
而且在每一个iframe主体文件中都有。
--我如何在主文档中定义创建？之类的东西？
document.body.firstChild.ownerDocument
(脚本应该通过safari扩展从injected.js执行任务)
浏览 5提问于2011-11-01得票数 2
回答已采纳
2回答
我已经有了一个表单和一个表，并且表单中的数据被添加到表中，但是我试图为我的表单添加一个insertBefore函数，但是它不起作用。你能告诉我我的脚本出了什么问题吗？
function insertBefore(){
var table = document.getElementById('table');
var row = document.createElement('tr');
var td1 = document.createElement('td');
var td2 = document.create
浏览 1提问于2012-10-29得票数 0
2回答
在下面的代码中，我不明白为什么firstChild会被调用，因为我们已经调用了arrray的第0位成员。
xhr.responseXML.getElementsByTagName("heading").firstChild.nodeValue；
完整代码如下：
(function() {
var link = document.getElementsByTagName("a")[0];
link.onclick = function() {
// Request
var xhr = new XMLHtt
浏览 4提问于2015-06-07得票数 0
回答已采纳
1回答
这件事从昨天下午开始就让我抓狂了。我试图使用jQuery的"add“方法连接两个选定的HTML主体。我显然错过了一些最基本的东西。下面是一些说明问题的示例代码：
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<p id="para1">This is a test.<
浏览 1提问于2014-12-19得票数 0
回答已采纳
1回答
在我的页面中，我有一个使用select2的选择选项和一个按钮来动态地向页面添加新的选择选项。但是我对由按钮动态创建的新控件有问题，我不能像原来的控件那样选择它。我还在试着解决这个问题，但如果你能帮我一把，提前谢谢，那就太好了！
<html>
<head>
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link
浏览 3提问于2016-08-02得票数 1
回答已采纳
1回答
我选择了一些隐藏的选项和两个按钮:向上和向下。为了隐藏选项，我必须将它们封装到不可见的span中，因为在某些浏览器中，<option style="display: none;">根本无法工作。当我按上或下按钮，我必须移动选择选项在选择列表向上或向下。最近我这样做了：
function moveOption(option, up) {
if (up) {
option.insertBefore(option.prev());
} else {
option.insertAfter(option.next());
浏览 8提问于2015-04-14得票数 3
回答已采纳
首先，对不起英语/语法不好。
我在创造你展示和隐藏的东西。
但我的问题是，当我单击“显示/隐藏”时，它只会在两个按钮上显示输入框1。我希望它能显示/隐藏每一个盒子。
我的问题是。我不想使用id来定义显示/隐藏元素，因为如果我有超过10个带有输入框的div，我必须使用getElementById来定义它们，我不想这样做。
我希望当我点击“显示/隐藏”时，它会带来没有getElementById的输入框，这样即使我有超过10个输入框来显示，我也只是点击和显示/隐藏，而没有定义它的id。
function myFunction(event) {
var x = docum
浏览 0提问于2018-11-08得票数 2
回答已采纳
我需要添加我的反应应用程序组件直接到身体作为第一个孩子。我的解决方案是这样的(但在我看来，它似乎是过火了)：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
const $container = document.createElement('div');
document.body.insertBefore($container, document.body.firstChild)
浏览 3提问于2017-05-17得票数 1
回答已采纳
这是我的脚本代码..。
<body onload= "startGame()">
<script>
var Earth;
var Mercury;
var Venus;
function startGame() {
Earth = new component(152, 183, 'earth.png', 800, 75);
Mercury = new component(122,151, 'mercury.png', 300, 400);
Venus = new component(152, 18
浏览 4提问于2017-04-17得票数 0
回答已采纳
如果你摆弄标签字符串，例如通过在><之间放置空格，效果就不同了。
<!DOCTYPE html>
<head><title>insertBefore error</title></head>
<body>
<div id='myElement'>above this div 3 elements should be inserted
but actually only 2 are, text2 is missing</div>
<script type="
浏览 0提问于2011-06-16得票数 2
回答已采纳
1回答
我有以下模板：
<template id="template">
<div class="choiceContainer">
<div class="btn-group"></div>
</div>
</template>
我在页面上多次使用这个模板，并且希望每个使用都被编号。下面是我用来检索模板和添加h1节点的javascript代码。
var template = document.getElementById("template&
浏览 0提问于2019-01-15得票数 0
回答已采纳
我正在做一个小的"RPG“CYOA，但我遇到了我的”选择框“的问题，因为只有第一个选择框被用来尝试选择其他选择，这将导致与第一个选择相同的选择结果。 我假设我需要为这些按钮的值设置一个数组，但不知道问题出在这个丢失的数组还是其他什么地方。下面是与Jquery混合在一起的Javascript。代码错误用粗体突出显示的区域...考虑到我不能在代码中将它们设置为粗体，它将被标记为* //Use this as script 3 is raw button scenario and script 3 is raw input scenario, this script is playgrou
浏览 23提问于2020-04-02得票数 0
回答已采纳
1回答
我试图在MS Word的表格中放置文本，表格由第一行和2列中的标题组成，然后是文本应该放在哪里的另一行。
要填充表的文本在UserForm中，更准确地说是TextBox3
因此，如果TextBox3包含：
汽车注册服务经理
我希望表格看起来像这样：
Header#1 | Header#2
Automotive | 85,000
Registered | 77,000
Services | 32,000
Manager | 500,00
来自Header#2的数字来自excel的数据库，这部分我可以决定手动完成，也可以在以后进行处理如果我遇到困难，我会寻求帮助，但现在我正在
浏览 2提问于2015-06-27得票数 1
我正在尝试使用textnode添加一个项目span。我做了一个面包屑，我需要这个结构。 Home > About > Project 我做到了。但不能使用JS :)在这些元素之间附加> 我需要附加span元素之间的链接。我该怎么做呢？但他不应该是最后一个，只有在 var mvalue = document.getElementById('abc').children;
//console.log(mvalue);
var para = document.createElement("span");
var t = document.cre
浏览 17提问于2019-06-23得票数 0
回答已采纳
我尝试使用函数just ()删除最后一行并将其作为第一行插入，而display()函数只是创建表。
<body>
<script>
function downward() {
var table = document.getElementsByTagName('table');
var count = table.rows.length - 1;
var table = table[count];
浏览 8提问于2017-07-19得票数 0
2回答
我有一个内置在vue.js中的UI，我需要向其中添加工具提示。我需要将工具提示放置在UI中特定div的左侧或右侧。我已经能够通过将工具提示设置为绝对位置来获得我想要的外观，但这没有响应，因此在某些屏幕上，工具提示与目标div不对齐。
UI相当复杂，所以我尽量避免使用flexbox/grid重新构建布局。我正在寻找一种使用javascript将工具提示‘锚定’到其对应的div的方法。
在这里，我使用append to和insertBefore，但是我仍然需要使用微调每个工具提示的位置。有没有办法只将一个div锚定在另一个div的旁边，这样工具提示就会一直跟随它的父div？
const
浏览 37提问于2021-05-15得票数 0
1回答
每一页的页眉打印
、、、、
我有一个网格视图，我想在每一页上打印它的标题，我想在每一页上打印一个页眉。问题是，一个或另一个对我有用。我不能让两个人同时工作。下面是演示我所做工作的示例代码。
<table>
<tr>
<td>
<body onload="thead('tblheader');">
<table id="tblheader">
<tr id="title" >
<td >Page HEADER</
浏览 1提问于2010-01-22得票数 0
回答已采纳
我需要使用纯javaScript将一些html添加到现有元素中：
function create(htmlStr) {
var frag = document.createDocumentFragment(),
temp = document.createElement('div');
temp.innerHTML = htmlStr;
while (temp.firstChild) {
frag.appendChild(temp.firstChild);
}
return frag;
}
var target = document.que
浏览 1提问于2017-02-28得票数 19
回答已采纳
据推测，jquery对象可以从字符串中初始化。在处理ajax结果时，这通常会发生，例如，我试图复制
然而，我看到了一些奇怪的行为：
function test() {
var content = $("<html><body><div>hello</div><div>world</div></body></html>");
alert("content.text() = " + content.text());
alert("conte
浏览 3提问于2015-05-03得票数 6
回答已采纳
4回答
我知道这个问题已经被问了好几次，但我仍然不明白在迭代jQuery数组时如何引用当前对象。例如，下面的代码给出了错误TypeError: genH3Array[i].next is not a function。引用当前数组对象的正确方式是什么？
var genH3Array = $('#Generation_II').parent();
genH3Array.push($('#Generation_III').parent());;
genH3Array.push($('#Generation_IV').parent())
$.
浏览 5提问于2011-01-07得票数 2
回答已采纳
我想在body标签中的另一个div之前添加一个新的div。我该怎么做呢？
这个html
<body class="variant-classic magazine notouch">
<div id="head" class="hfeed" tabindex="0">
<div id="header-container">
// other div areas
</body>
我写的脚本
var container = document.getEle
浏览 2提问于2015-08-03得票数 2
1回答
在WPF/C#中编程，使用awesomium WebControl
我试着点击这个：
<li class="playlist-item-favorite" data-title="Ulubione" data-is-private="False">
<a href="javascript: void(0);">
<span class="playlist-title">
Ulubione
<span cl
浏览 0提问于2013-04-06得票数 0
我在使用jQuery从td获取值时遇到了问题。
不管我怎么编辑我的代码，它总是说“未定义”或者没有结果。
我不知道出了什么问题。
下面是我的代码：(最初，来自mySQL DB的数据应该在表中。但为了使问题更简短，我省略了它们)
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1
浏览 8提问于2017-06-29得票数 0
回答已采纳
1回答
我被困在使用jQuery移动框架克隆无线电场集的过程中。我通常使用.live事件或克隆(True)
$(".cloneButton").live('click', function() {
$('#fieldSet1').clone().insertBefore('.cloneButton');
});
但是，它在这种情况下不起作用。克隆的单选按钮仍然控制着原始的。
如果有人熟悉jQuery手机，我将感谢您的帮助。
参见此示例-
我从拿了无线电样本代码
谢谢,
克里斯
浏览 2提问于2011-08-27得票数 0
回答已采纳
1回答
我是，使用Golang处理epubs，我必须从cover.xhtml文件(或.opf文件中提到的任何文件)中获取封面图像。
我的问题是Cover.xhtml文件中元素的动态结构。
在Cover.xhtml文件中，每个epubs都有不同的结构。例如,
<body>
<figure id="cover-image">
<img src="covers/9781449328030_lrg.jpg" alt="First Edition" />
</figure>
</
浏览 1提问于2017-06-15得票数 0
回答已采纳
我试图通过javascript在一个CMS生成的页面上插入一个包装div，这个页面我没有太多的访问权限。我试图包装的所有HTML内容都生活在一个div共享同一个类的堆栈中。上面的分区应该排除在外。所以我有：
<div class="rowClass">This div should be excluded</div>
<div class="rowClass">This div and the rest should be wrapped</div>
<div class="rowClass
浏览 6提问于2015-12-11得票数 2
回答已采纳
按照下面的设置，我想在不同的子div中插入hr元素(父div中有2个子div)。对于同一div中的一个元素，insertbefore方法可以很好地工作，但对于另一个子div中的元素就不行了(参见下面的代码)。有没有不同的方法我可以用来实现这一点，或者我想要不可能的事情？
<body>
<div id="whole section">
<div id="group_a">
<h3 id="event_1">Heading 1</h3>
<p> some text &
浏览 1提问于2013-02-26得票数 1
回答已采纳
2回答
有没有一种有效的方法可以用jSoup获取所有打开但不是关闭的标签的HTML元素标签路径？
例如，如果HTML是
<!DOCTYPE html>
<html>
<head>...</head>
<body>
<section id="secID">
<div class="divClass">
<section id="subSection">
浏览 0提问于2013-03-24得票数 0
回答已采纳
1回答
我一直在创建一个待办事项列表，它有两个按钮，每一个条目，这是做行完成的任务，并删除它。当我删除第二项时，它首先删除而不是删除第二项。我怎么才能解决这个问题？谢谢。
这是HTML
<body>
<header>
<h1>To Do List</h1>
<div class="addItems">
<input type="text" name="text" id="addThis" onfocus="this.value=
浏览 4提问于2020-12-11得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
