全栈JavaScript之路（ 二十 ）HTML5 插入 html标记 （ 二 ）insertAdjacentHTML

最新推荐文章于 2023-03-10 21:09:18 发布
最新推荐文章于 2023-03-10 21:09:18 发布
阅读量1.7k 收藏
点赞数 1
分类专栏： 浏览器 JavaScript 笔记 live in js 文章标签： html5 insertAdjacentHTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liveinjs/article/details/37603939
版权

insertAdjacentHTML(),  这个方法也是在IE中最早出现的，现在已纳入html5规范，它接受两个参数，一个是下列的标记之一，一个是要写入的 html 代码文本。

  1. beforebegin , (英文为开始之前的意思)在当前元素之前插入一个新的紧邻的同辈元素
  2. afterbegin,(英文为开始之后的意思)在当前元素之下插入一个子元素，或者是在当前元素的第一个子元素之前插入一个新的子元素。
  3. beforeend，(英文为结束之前的意思)在当前元素之后插入一个新的子元素，或者在当前元素最后一个子元素之后插入一个新的子元素，
  4. afterend，(英文为结束之后的意思)在当前的元素之下插入一个紧邻的同辈元素。

支持insertAdjacentHTML()方法的浏览器有IE、Firefox 8+、Safari、Opera 和Chrome。

holdindex
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html与android交互总结
Atiejiayiranzai的博客
05-24 700
WebView是html与Android直接联系的纽带，可以通过WebView实现Android调用web端内容方法，WebView也可以实现web端调用Android的方法并获取返回值。以下是对web端和android本地通过WebView交互方法的总结。 一:web端调用Android端 1）可以通过webview的addJavaScriptInterfance(Object 对象，...
原生js html insert,原生js操作Table元素的方法,使用insetRow,insertCell
weixin_42628846的博客
05-31 870
table的操作方法我们先看一下table都有哪些属性和方法，table在页面中叫做HTMLTableElement。table有几个跟操作table，tr，td的方法。table的操作方法table.insertRow([index])-插入一个tr。tr.insertCell(index)-插入一个td。table.createCaption()-table内创建一个table标题。table...
深入理解javascript动态插入技术
12-09
最近发现各大类库都能利用div[removed]=HTML片断来生成节点元素，再把它们插入到目标元素的各个位置上。这东西实际上就是insertAdjacentHTML，但是IE可恶的innerHTML把这优势变成劣势。首先innerHTML会把里面的某些位置的空白去掉，见下面运行框的结果： 代码如下:<!doctype html><html dir=”ltr” lang=”zh-CN”>    <head>        <meta charset=”utf-8″ />        <title>            IE的innerHTML By 司徒正美        </titl
如何在指定的地方插入html内容和文本内容
12-01
dhtml提供了两个方法来进行添加，insertAdjacentHTML和insertAdjacentText insertAdjacentHTML方法：在指定的地方插入html标签语句。 原型：insertAdjacentHTML(swhere,stext) 参数： swhere:指定插入html标签语句的地方，有四种值可以用： 1.beforeBegin:插入到标签开始前 2.afterBegin:插入到标签开始标记后 3.beforeEnd:插入到标签结束标记前 4.afterEnd:插入到标签结束标记后 stext:要插入的内容 例： 代码如下: var sHTML=”<input
HTML5 元素通用DOM接口
11-23
HTML5 元素通用DOM接口 interface HTMLElement : Element { // DOM tree accessors NodeList getElementsByClassName(in DOMString classNames); // dynamic markup insertion attribute DOMString innerHTML; attribute DOMString outerHTML; void insertAdjacentHTML(in DOMString position, in DOMString text); // metadata attributes attribute DOMString id; attribute DOMString title; attribute DOMString lang;
在table中插入多行，能使用与insertAdjacentHTML相似的功能吗？
12-11
对于div等元素来说，插入一段html是很容易的事情，但是对于表格来说就太难了。一般情况下，我们都是用appendChild的方式，一行行、一格格地添加，操作起来很繁锁。能不能拼一串字符，就能直接加入到表格中呢？ 　　下面的例子实现了这个功能，同样地，该例支持IE和firefox。该功能的实现意义重大，这样页面元素的处理，就全部都能够用拼html字串的方法来实现了。 1 插入行 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
dom-insert-html:使用“insertAdjacentHTML”的 HTML 字符串 DOM 插入方法
07-04
dom-insert-html HTML 字符串 DOM 插入方法。 使用方便的、对压缩器友好的方法。 安装 npm install dom-insert-html 应用程序接口 可用方法： after(element, string) : 在元素之后插入 HTML 字符串。 before(element, string) : 在元素之前插入 HTML 字符串。 append(element, string) : 将 HTML 字符串附加到元素。 prepend(element, string) : 将 HTML 字符串添加到元素中。 每个方法都接受： element {Element}: DOM 元素 string {String}：要插入的 HTML 字符串。 例子 var html = require ( 'dom-insert-html' ) ; var el =
html返回首页页面代码,后台返回的HTML整个页面代码打开方法
weixin_36470210的博客
06-07 1420
后台返回的html代码片段，需要插入html标签中，而返回的整个html文档，则需要重写整个页面。解决方法：需要一个中转页面，用document.write()方法重写整个页面；// POST任意内容并跳转function StandardPost(html) { localStorage.removeItem('callbackHTML'); localStorage.setItem('cal...
学习的第三天
zxc1006183503的博客
08-11 126
什么HTML : 超文本标记语言 p标签: 段落标签 br标签: 简单换行 h1-h6: 标题标签 hr标签: 水平分割线, 华丽的分割线 font标签: color属性改变颜色 , size b标签: 加粗 i标签: 斜体 strong标签: 带语义的加粗 em标签: 斜体标签,带语义 img标签: 图片标签 显示图片 ​ src: 指定图片路径(相对路径) ​ width: 宽度 ​ heig...
Js中insertAdjacentHTML的用法
六仔的博客
02-25 731
insertAdjacentHTML() 将指定的文本解析为HTML或XML，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接innerHTML操作更快。 语法： element.insertAdjacentHTML(position, text); position是相对于元素的位置，并且必须是以下...
live2d看板娘设置
04-16
详细介绍见https://blog.csdn.net/renjingzhaozhao/article/details/105558061
html5 | 通过js实现对网页文本内容语音朗读 | 教程
洛阳泰山的博客
02-17 8041
网页文字语音阅读功能实现的核心是通过网页语音 API的SpeechSynthesis接口是语音服务的控制接口；它可以用于获取设备上关于可用的合成声音的信息，开始、暂停语音，或除此之外的其他命令。 在定义了一些必要的变量后，我们用SpeechSynthesis.getVoices()获取了一列可用的声音并且用它们生成一列可选表单，这样用户能够选择他们想要的声音。 inputForm.onsubmit的内部操作中，我们用preventDefault()阻止了表单的提交，创建了一个从&lt...
网页编程的学习笔记
傾城如夢的专栏
09-29 4476
网页编程的学习笔记 一、JavaScript 二、ASP 一、JavaScript 0-1基本Html语言 n(1)超链接指定目标网页的Name &lt;Ahref="a1.htm"target="xzy"&gt;连结&lt;/A&gt; 一般情况下超链接打开的目标网页是在本网页之内打开的,但是利用上面的代码可以在新窗口中打开目标网页,再重新打开...
REUSE_ALV_GRID_DISPLAY_LVC函数输入参数属性的应用
xuehen86的博客
04-28 1279
转载：http://www.sapjx.com/reuse_alv_grid_display_lvc.html 前面我们讲过，ALV Grid 函数的输出有两个：REUSE_ALV_GRID_DISPLAY 和 REUSE_ALV_GRID_DISPLAY_LVC 两者的操作大同小异，只是后者能更好的和ALV容器结合使用，前后则不能；而在输入参数属性的结构上也有些差异。 本篇文章主要讲解下ALV函...
如何操作（增、删、改、查）常见的 HTML 元素呢？ （包含原生 js 和 JQuery 语法对照）
昔明日
03-10 241
注：此表仅例举了少部分常用的元素取值和赋值方式，其他的节点可自行测试，使用哪种方式。object.innerHTML=“文字” - 含 html 标记。object.html（“文字”） - 含 html 标记。object.html（） - 含 html 标记。查询（结果为一组对象，需通过序号来指定单个对象）查询（结果为一组对象，需通过序号来指定单个对象）object.text（“文字”） - 纯文字。object.text（） - 纯文字。object.val（“文字”）（object 代表元素对象）
javascript的insertAdjacentHTML()方法
weixin_48462578的博客
04-04 359
insertAdjacentHTML() 类似innerhtml=,但是可以插入字符串 beforebegin 在元素之前 afterbegin 在元素的第一个子元素之后 beforeend 在元素的最后一个子元素之后 afterend 在元素之后
总结js常用的dom操作
jean_0920的博客
08-27 245
节点查找API document.getElementById ：根据ID查找元素，大小写敏感，如果有多个结果，只返回第一个；document.getElementsByClassName ：根据类名查找元素，多个类名用空格分隔，返回一个 HTMLCollection 。注意兼容性为IE9+（含）。另外，不仅仅是document，其它元素也支持 getElementsByClassName 方法；...
html5 载入另一个页面,如何将一个html页面中嵌入另一个html页面
weixin_32533659的博客
05-30 7453
将一个html页面中嵌入另一个html页面需要使用到iframe标签。iframe标签用法：scrolling禁止鼠标滑动，frameborder嵌套页面边框，leftmargin左边距，topmargin上边距Iframe嵌套HTML网页的用法?比如说我有两个超链接，还有两个Message1.HTML和Message2.HTML页面 和两显示网页1 显示网页2 target关联框架名就可以了。h...
js语句插入html的哪个位置可以运行
最新发布
06-07
在JavaScript中，可以通过以下几种方式向HTML页面中插入内容： 1. innerHTML属性：可以将HTML标签和文本插入到指定元素的内部HTML内容中。例如： ``` document.getElementById("example").innerHTML = "<p>Hello World</p>"; ``` 这个例子会将一个段落标签插入到id为example的元素中。 2. outerHTML属性：可以将整个元素替换为新的HTML内容。例如： ``` document.getElementById("example").outerHTML = "<div id='example'><p>Hello World</p></div>"; ``` 这个例子会将id为example的元素替换为一个新的带有段落标签的div元素。 3. insertAdjacentHTML方法：可以在指定的位置插入新的HTML内容，包括beforebegin、afterbegin、beforeend和afterend四种位置。例如： ``` document.getElementById("example").insertAdjacentHTML("beforeend", "<p>Hello World</p>"); ``` 这个例子会在id为example的元素的结束标签前插入一个段落标签。 这些方法和属性可以在HTML页面中的任何位置执行，只需将JavaScript代码放在<script>标签中或者外部JavaScript文件中，并在HTML页面中引入即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值