这句话是什么意思：document.body.insertAdjacentHTML("afterbegin", navbar);，第一个参数有哪些可选项？

时间: 2023-05-21 15:07:03 浏览: 238

insertAdjacentHTML动态插入行[归类].pdf

在软件开发中，尤其是涉及到网页动态更新和DOM操作时，`insertAdjacentHTML`是一个非常实用的方法。这个方法允许开发者在指定的位置动态插入HTML内容，相比`innerHTML`和`innerText`，它提供了更多的灵活性。`insertAdjacentHTML`的主要作用是将字符串形式的HTML代码插入到一个元素的特定位置，其基本语法为： ```javascript element.insertAdjacentHTML(position, text); ``` 这里的`position`参数定义了插入位置，它可以取四个值： 1. `beforeBegin`：在元素自身之前插入，即插入内容成为该元素的第一个兄弟节点。 2. `afterBegin`：在元素内部的第一个子节点之前插入，即插入内容成为元素的第一个子节点。 3. `beforeEnd`：在元素内部的最后一个子节点之后插入，即插入内容成为元素的最后一个子节点。 4. `afterEnd`：在元素自身之后插入，即插入内容成为该元素的下一个兄弟节点。例如，在以下代码中，当点击按钮时，`insertAdjacentHTML`会在按钮元素`btn1`之后插入一个`<br>`和一个新的输入框： ```html <input name="txt"> <input id="btn1" name="btn1" type="button" value="更多..." onclick="myfun()"> <script> function myfun(){ var obj = document.getElementById("btn1"); obj.insertAdjacentHTML("afterEnd", "<br><input name='txt1'>"); } </script> ``` 另一个示例展示了`insertAdjacentHTML`在不同位置插入内容的效果： ```html <div id="paral" style="font-size:6px;color:'#ff00ff'">原来的内容</div> <hr> <script> function addsome() { document.all.paral.insertAdjacentHTML("afterBegin", "<h1>在文本前容器内插入内容</h1>"); document.all.paral.insertAdjacentHTML("beforeEnd", "<h2>在文本后容器内插入内容</h2>"); document.all.paral.insertAdjacentHTML("beforeBegin", "<h4>在文本前容器外插入内容</h4>"); document.all.paral.insertAdjacentHTML("afterEnd", "<h5>在文本后容器外插入内容</h5>"); } </script> ``` 在这个例子中，`addsome`函数会分别在`paral`元素的开始前、开始后、结束前和结束后插入不同的标题内容。此外，还有一个与`insertAdjacentHTML`相似但只能插入纯文本的方法`insertAdjacentText`，它的用法与`insertAdjacentHTML`类似，只是插入的内容不会被解析为HTML。一个简单的动态添加和删除元素的例子： ```html <input type="button" onclick="Add_button()" value="动态加"> <input type="button" onclick="alert(c_input.innerHTML)" value="查看innerHTML"> <div id="c_input"></div> <script> var num = 0; var No_sys = 0; function Add_button() { if (No_sys < 8) { c_input.insertAdjacentHTML("beforeEnd", `<div id="bar${num}" oncontextmenu="Remove_button(bar${num});return false" style="background:red;width:40;height:20">${num}</div>`); num++; No_sys++; } } function Remove_button(obj) { obj.removeNode(true); No_sys--; } </script> ``` 在这个例子中，每次点击“动态加”按钮，都会在`c_input`元素后面添加一个红色的数字标签，并且这些标签可以通过右键点击来删除。 `insertAdjacentHTML`是JavaScript中用于DOM操作的一个强大工具，它能够精确地控制HTML内容的插入位置，对于创建动态交互的网页有着重要作用。通过合理运用这个方法，开发者可以轻松实现各种复杂的页面布局和内容更新效果。

这句话的意思是在 HTML 页面的 body 元素最开始插入一段 HTML 代码（navbar 变量）。第一个参数可选的值有 "beforebegin", "afterbegin", "beforeend" 和 "afterend"。分别表示在目标元素前插入、目标元素内部的最前面插入、目标元素内部的最后面插入以及在目标元素后插入。

阅读全文

这句话是什么意思：document.body.insertAdjacentHTML("afterbegin", navbar);，第一个参数有哪些可选项？

相关推荐

javascript document.images实例

eslint-plugin-no-unsanitized:自定义ESLint规则可禁止不安全的innerHTML，outerHTML，insertAdjacentHTML等

document.body.insertAdjacentHTML("afterbegin", navbar);函数是什么意思，函数参数有哪些可选项

_document.body.insertAdjacentHTML("beforeend", ""); 如何解决

dom-insert-html:使用“insertAdjacentHTML”的 HTML 字符串 DOM 插入方法

在table中插入多行，能使用与insertAdjacentHTML相似的功能吗？

innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别

body.insertAdjacentHTML

insertadjacenthtml

帮我写一个前端界面，需求：1.div1 持续时长+input标签 +button 搜索2 div2 动态显示div1搜索框下拉列表（需要复选框） ，当选择后自动隐藏，其数据来源为数据库类型为数组，3.div3 以表格展示选中的数据4.美化界面

insertadjacenthtml为空

spans[i].insertAdjacentHTML('afterend', '');

ncaught TypeError: Cannot read properties of null (reading 'insertAdjacentHTML')

TypeError: Cannot read properties of null (reading 'insertAdjacentHTML')怎么解决

浏览器读取不了我的insertadjacenthtml

基于Java的家庭理财系统设计与开发-金融管理-家庭财产管理-实用性强

最新推荐

基于Java的家庭理财系统设计与开发-金融管理-家庭财产管理-实用性强

弹性盒子Flexbox布局.docx

探索数据转换实验平台在设备装置中的应用

管理建模和仿真的文件

ggflags包的国际化问题：多语言标签处理与显示的权威指南

如何使用MATLAB实现电力系统潮流计算中的节点导纳矩阵构建和阻抗矩阵转换，并解释这两种矩阵在潮流计算中的作用和差异？

使用git-log-to-tikz.py将Git日志转换为TIKZ图形

"互动学习：行动中的多样性与论文攻读经历"

ggflags包的定制化主题与调色板：个性化数据可视化打造秘籍

如何使用Matlab进行风电场风速模拟，并结合Weibull分布和智能优化算法预测风速？

帮我写一个前端界面，需求：1.div1 持续时长+input标签 +button 搜索2 div2 动态显示div1搜索框下拉列表（需要复选框），当选择后自动隐藏，其数据来源为数据库类型为数组，3.div3 以表格展示选中的数据4.美化界面

spans[i].insertAdjacentHTML('afterend', '
');