javascript插入before(),after()新DOM方法
随着web的技术突飞猛进的发展。HTML5 ES6等新技术的发展,与此同时DOM等标准也在悄悄的进步,各大浏览器也在悄悄的发展适配新的属性和方法,今天我们来看看Javascript新的DOM的方法
二、before(),after(),prepend(),append()等新增DOM
before()
before()
是个ChildNode
方法,也就是节点方法。节点方法对应于元素方法。区别在于,节点可以直接是文本节点,甚至注释等。但是,元素必须要有HTML标签。
因此,before()
的参数既可以是DOM元素,也可以是DOM节点,甚至可以直接字符内容;
语法如下
void ChildNode.before((节点或字符串)... 其它更多节点); DOM案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img id="images" src="detail.jpg" alt="">
<p><button id="beforeText">图片前面插入文字“美女:”</button></p>
</body>
</html> <script>
//插入节点的方法
var eleImg = document.getElementById('images');
var eleBtnBeforeText = document.getElementById('beforeText');
eleBtnBeforeText.addEventListener('click', function () {
var eleTitle=document.createElement('h1');
eleTitle.innerHTML='美女';
eleImg.before(eleTitle);
}); </script>
这是插入DOM节点,那可不可以指接拆入纯文本呢O(∩_∩) 淡然可以,我们再看一下纯文本代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img id="images" src="detail.jpg" alt="">
<p><button id="beforeText">图片前面插入文字“美女:”</button></p>
</body>
</html> <script>
//插入节点的方法
var eleImg = document.getElementById('images');
var eleBtnBeforeText = document.getElementById('beforeText');
eleBtnBeforeText.addEventListener('click', function () {
eleImg.before("我是文字");
}); </script>
显然是可以的,那插入HTML字符串呢
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img id="images" src="detail.jpg" alt="">
<p><button id="beforeText">图片前面插入文字“美女:”</button></p>
</body>
</html>
<script>
//兼容处理源自 https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/before()/before().md
(function (arr) {
arr.forEach(function (item) {
if (item.hasOwnProperty('before')) {
return;
}
Object.defineProperty(item, 'before', {
configurable: true,
enumerable: true,
writable: true,
value: function before() {
var argArr = Array.prototype.slice.call(arguments),
docFrag = document.createDocumentFragment(); argArr.forEach(function (argItem) {
var isNode = argItem instanceof Node;
docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
}); this.parentNode.insertBefore(docFrag, this);
}
});
});
})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);
</script> <script>
//插入节点的方法
var eleImg = document.getElementById('images');
var eleBtnBeforeText = document.getElementById('beforeText');
eleBtnBeforeText.addEventListener('click', function () {
eleImg.before('<strong>美女:</strong>');
}); </script>
可以看吃是不可以直接插入HTML字符串的,有人要疑问了,我非要在图片前面插入HTML字符内容怎么办
可以使用兼容性更好的insertAdjacentHTML()
DOM方法,使用示意如下:
document.getElementById('img').insertAdjacentHTML('beforebegin', '<strong>美女:</strong>');
语法如下:
element.insertAdjacentHTML(position, html);
<html>
<head>
<mce:script language="javascript"><!--
function myfun(){
var obj = document.getElementById("btn1");
obj.insertAdjacentHTML("afterEnd","<br><input name="txt1">");
} // --></mce:script>
</head>
<body>
<input name="txt">
<input id="btn1" name="btn1" type="button" value="更多" onclick="myfun()">
</body>
</html>
更加详细的关于点击insertAdjacentHTML
after()
after跟before()语法特性兼容性都是一一对应的,差别就在于语义上,一个是在前面插入,一个是在后面插入。,这里就不更详细的解释了
重点
after()与before这些新的方法有兼容性,兼容版本如下图所示
如果非要再旧版浏览器使用新的API属性怎么办呢,我们需要引入一段代码来让老式浏览器兼容
// 源自 https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/before()/before().md
(function (arr) {
arr.forEach(function (item) {
if (item.hasOwnProperty('before')) {
return;
}
Object.defineProperty(item, 'before', {
configurable: true,
enumerable: true,
writable: true,
value: function before() {
var argArr = Array.prototype.slice.call(arguments),
docFrag = document.createDocumentFragment(); argArr.forEach(function (argItem) {
var isNode = argItem instanceof Node;
docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
}); this.parentNode.insertBefore(docFrag, this);
}
});
});
})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);
注意,上面的polyfill 并不支持IE8及其以下浏览器。 API只能在至少兼容到IE9浏览器的项目使用。
】结束
三、结束语
我们如今,原生的DOM API借鉴jQuery的优点,也整出了很多简单遍历的API方法;如果我们再粘贴一些polyfill JS搞定兼容性问题;再配合ES5很多数据处理方法;DOM leave 3的事件处理等。
基本上就没有需要使用jQuery的理由了,省了资源加载,提高了代码性能,
所以,基本上,已经不可逆地,在不久将来,不出几年,行业会兴起原生DOM API,原生JS开发前端应用的小风尚,jQuery会越来越不被人提起,完成其历史使命,日后可以领取个终身成就奖。
javascript插入before(),after()新DOM方法的更多相关文章
- before(),after(),prepend(),append()等新DOM方法简介
一.DOM API也在不断升级 web前端标准一直在不断升级,比方说,说了很多年的HTML5.CSS3,以及天天见的ES6. 然后,似乎就没有然后了.实际上,除了HTML5/CSS3/ES6+,关于D ...
- JavaScript中易混淆的DOM属性及方法对比
JavaScript中易混淆的DOM属性及方法对比 ParentNode.children VS Node.prototype.childNodes ParentNode.children:该属性继承 ...
- 将JavaScript 插入网页的方法
将JavaScript 插入网页的方法 使用Javascript代码. 插入JavaScript 与在网页中插入CSS的方式相似.使用下面的代码可以在网页中插入JavaScript: ... 其中的. ...
- 《高性能javascript》 领悟随笔之-------DOM编程篇
<高性能javascript> 领悟随笔之-------DOM编程篇一 序:在javaSctipt中,ECMASCRIPT规定了它的语法,BOM实现了页面与浏览器的交互,而DOM则承载着整 ...
- DOM – (w3school)1.DOM 方法 + 2.DOM属性 + 3.DOM 元素
1.DOM 方法 一些 DOM 对象方法 这里提供一些您将在本教程中学到的常用方法: 方法 描述 getElementById() 返回带有指定 ID 的元素. getElementsByTa ...
- 第一百一十四节,JavaScript文档对象,DOM进阶
JavaScript文档对象,DOM进阶 学习要点: 1.DOM类型 2.DOM扩展 3.DOM操作内容 DOM自身存在很多类型,在DOM基础课程中大部分都有所接触,比如Element类型:表示的是元 ...
- 第一百一十三节,JavaScript文档对象,DOM基础
JavaScript文档对象,DOM基础 学习要点: 1.DOM介绍 2.查找元素 3.DOM节点 4.节点操作 DOM(Document Object Model)即文档对象模型,针对HTML和XM ...
- 总结一下自己脑海里的JavaScript吧(一)--DOM模型
今天是2019年6月25日,闲来无事,写一篇文章来看看自己脑袋里装了多少JavaScript知识! 这儿就第一章: 说起JavaScript,它是什么?后端脚本语言?前端编程语言?还是在网站浏览器上运 ...
- 轻松学习JavaScript二十二:DOM编程学习之节点操作
DOM编程不只能够查找三种节点,也能够操作节点.那就是创建,插入,删除.替换和复制节点.先来看节点 操作方法: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQ ...
随机推荐
- 将指定目录中的txt文件转化成excel文件
#!/usr/bin/env python#coding:utf-8import reimport osimport globimport xlwtimport sysdir=r"F:\te ...
- MySQL之数据的备份与还原
备份db_book:这里用到了cmd,以管理员方式运行,不然后面使用mysqldump会被拒绝访问!!! 1.启动cmd,输入命令,切换到MySQL的bin文件: 2.然后输入备份命令: 备份好的sq ...
- 可编辑的EditorGridPanel
1.创建pannel是为可编辑的: new Ext.grid.EditorGridPanel 2.设置单击可以编辑属性: clickstoEdit: 1 3.在列设置添加文本编辑框 {header:& ...
- 读取Execl表 导入数据库
不知不觉博客园园林都两年多了,我是今年毕业的应届生,最近公司项目需要改动,很多的数据需要导入,很多的实体类需要些.考虑到这些问题自己写了两个winform版的小工具,一个是读取Execl数据导入数据库 ...
- websocket实现简单聊天程序
程序的流程图: 主要代码: 服务端 app.js 先加载所需要的通信模块: var express = require('express'); var app = express(); var htt ...
- Java内存模型:volatile详解
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt202 Java内存模型:volatile是干什么用的Volatile字段是用 ...
- Zookeeper和 Google Chubby对比分析
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt375 随着云计算的推广,云平台的设计和实现越来越复杂,很多系统属性如一致性和 ...
- 201521044091 《Java学习笔记》 第六周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结.注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖面 ...
- 201521123117 《Java程序设计》第6周学习总结
1. 本周学习总结 2. 书面作业 Q1.clone方法 1.Object对象中的clone方法是被protected修饰,在自定义的类中覆盖clone方法时需要注意什么? 答:在自定义的类中覆盖cl ...
- 201521123059 《Java程序设计》第三周学习总结
1. 本周学习总结 2. 书面作业 1.代码阅读 public class Test1 { private int i = 1;//这行不能修改 private static int j = 2; p ...