木灵鱼儿
阅读:1745
自定义insertAfter() 在当前元素节点的后面添加新的内容
由于document中并没有insertAfter()这个功能,只有insertBefore()在当前元素节点的前面添加新的内容,在后面添加是没有的,但是我们可以自己做一个有这个功能得函数。
首先有几点前提条件:
- 该元素节点后面有其他同级得节点
- 如果没有同级得节点他应该就是最后一个节点
- 由于我们写html时会有换行得操作,导致产生了空白节点,所以我们还需要移除这个空白节点才能正常操作。
我们先写一个简单得html代码:
<body>
/*这是该元素为最后一个节点*/
<div id="box">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
</body>
JS代码:
window.onload = function() {
var box = document.getElementById('box'); //找到id为box的元素节点
var p = document.createElment('p'); //创建一个p元素节点并储存在内存中
var text = document.createTextNode('测试文本'); //创建一个文本节点并存储在内存中
p.appendChild(text); //将文本节点传入p元素节点中
box.parentNode.appendChild(p); //通过box的父元素节点从最后子节点的后面传入p元素节点
};
这是在不考虑有空白节点影响得情况下这样写,下面我们再写一下当box不是最后一个的时候:
window.onload = function() {
var box = document.getElementById('box'); //找到id为box的元素节点
var p = document.createElment('p'); //创建一个p元素节点并储存在内存中
var text = document.createTextNode('测试文本'); //创建一个文本节点并存储在内存中
p.appendChild(text); //将文本节点传入p元素节点中
box.parentNode.insertBefore(p,box.nextSibling); //通过父元素传入到box下一个同级节点得前面
};
这是box的后面有同级节点得情况,也是不考虑空白节点得影响,下面我们写出综合情况,并删除空白节点得影响,已达到大部分情况都能适应:
window.onload = function() {
var box = document.getElementById('box');
var p = document.createElement('p');
var text = document.createTextNode('测试文本');
p.appendChild(text);
(function insertAfter(box) {
//删除空白
function removewhite(node) {
for(var i = 0;i < node.parentNode.childNodes.length;i++) {
if(node.parentNode.childNodes[i].nodeType === 3 && /^\s+$/.test(node.parentNode.childNodes[i].nodeValue)){
node.parentNode.removeChild(node.parentNode.childNodes[i]);
};
};
return node;
};
removewhite(box)
if(box.parentNode.lastChild === box){
box.parentNode.appendChild(p);
alert('最后一个');
}else {
box.parentNode.insertBefore(p,box.nextSibling);
alert('还有一个');
};
})(box);
};
先利用removChild()先删除box得父元素中得空白节点,这个父元素也就是body,这时的body已经没有空白节点了,所以我们直接做个判断是if去判断这个box是不是最后一个,如果是就直接appendChild()添加,不是就利用nextSibling添加,然后我用了一个自运行得函数将他们封起来,其实也不用了,如果只是单独一个功能,window.onload就已经封包了。
以上就是我得个人见解,有啥问题可以一起探讨。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
为什么length不准
前言这个问题在最近经常被刷到,虽然我知道怎么解决这个问题,但是为什么会这样,其实并不太明白,所以这次特此开一篇文章讲讲为什么length获取字符位数会不准的问题,以及我们的解决办法。"𠮷".length //2 "💩".length //2𠮷与吉利的吉是一个意思,𠮷是异体写法,古文中会出现。按照我们的认知,上述的length输出应该是1才对,但事实上却是2。计算机是如何存储字符的早期的ASCII字符集在计算机中,所有的数据存储最终都是二进制,如何正确的存储及其识别字符,做法就是定制一个编码规则,让每个字符都由一个个数字来表示,这些数字被...

第三章 函数
背景简介JavaScript中函数有两个主要特点使其变得特殊:函数是“第一类对象”,更久之前也称之为“第一等公民”函数可以提供作用域什么是第一类对象第一类对象(First-class object)这个名称可以追溯到1960年,原称为第一类公民(First-class citizen),简单点来总结来说,可以在该语言中做到其他元素都能进行的所有操作(你们能干的我也都能干),就可以称为一等公民。一等公民的概念在《计算机程序的构造和解释》书籍中提及,而我们JavaScript的一等公民的概念是因为Brendan Eich(布兰登·艾奇 - JS之父)在设计语言是借鉴了Scheme语言,在Sc...
JSON 格式化对象,对象中存在函数的解决办法,JSON格式化函数
json在格式化对象是,如果是普通的键值对对象还是没有问题的,但是如果他的值是一个函数,在格式化之后,函数就会被剔除。const a = { name: '我爱你', fn: function(){ console.log("我也爱你!") } }; const b = JSON.stringify(a);当你输出变量b的时候,你得到的会是:"{\"name\":\"我爱你\"}"fn不见了!引用JSON.stringify()方法描述中的一段解释:undefined、任意的函数以及 s...
fetch 请求报错处理思路
之前写过一片使用fetch下载文件的方法,但是如果后端返回一个错误对象,使用response.blob()会将这个错误对象直接转为blob对象,然后被转为文件下载下来。但实际上我们是要区分处理的,比如是文件流我们就下载文件,是错误对象,我们就进行错误提示和抛出错误。所以这里,我主要分享下我对错误处理的思路。基础知识首先,在fetch第一个then回调中,我们可以对response对象进行三种方法操作:response.text 返回的是一个纯文本 是一个promise对象response.json 返回的是一个对象(json/array) 是一个promise对象response.b...

获取元素距离顶部的距离
这个方法太常用了,写个笔记 //获取顶部距离 function getTop(element) { let realTop = element.offsetTop; let parent = element.offsetParent; while (parent !== null) { realTop += parent.offsetTop; parent = parent.offsetParent; } return realTop; },接收原生dom对象
语义化标签
无序列表 ul并不是所有的并列关系的数据都要使用到ul无序列表,ul他大多数出现在行文中间,也就是在ul的上部,我们一般会有文字说明,如列举一些选项啥的。所以,对于语义标签,我的态度是:‘“用对" 比“不用” 好,“不用" 比“用错”好。当然了,我觉得有理想的前端工程师还是应该去追求“用对”它们。所以,有时候用其他元素替换ul,反倒可以减少冗余的标签。(感觉我就是那种,为了所谓的语义而去大量使用的这种,这种习惯以后要改了)em强调倾斜和strong强调加粗em可能常常和strong标签概念混淆,而strong的大量使用,其实原因就是他不倾斜,文本加粗,在日常使用中,这种情况更多一些,即便...
Function 函数
函数默认参数es5无法设置默认参数,只能通过函数内部先进行判断,如果没有参数则设置一个值。function test(x,y){ x = x || "hello "; y = y || "word"; console.log(x+y); } test(); //hello word这样写的话会有一个问题,就是如果我就要参数为空,就会出现问题test("","test"); // hello test所以我们还需要加一个判断function test(x,y){ x = typeof x...
Ajax 表单序列化
什么是表单序列化呢?将所有表单的提交通过一个标准化的方法去获取并且提交出去,那就是序列化,也就是说不同的表单,如注册啊,登录啊,修改资料啊,这些东西可以通过一个通用的方法去处理它。那么表单序列化有几个要求:不能发送禁用的表单字段;只发送勾选的复选框和单选按钮;不发送type是reset、submit、file、button以及字段集;多选选择框中的每个选中的值单独一个条目;对于select元素,如果有value值,就指定value作为发送的字段,如果没有,就指定text值;已经将ajax的代码作为单独的一个文件保存,而调用则使用ajax()的方法,之前也做了一个表单提交的方法,在所有条件...
为博客添加鼠标点击特效(富强、民主、文明、和谐...)全平台通用 V2.0
已经写了新版,jq的方法,地址:jq富强,如果连接失效可以在本博客搜索富强,也可以找到对应的文章经过长时间的学习,终于迎来小高潮,更新为2.0版本!2018-10-5 修复预加载js代码失效bug2018-11-3 修复了当鼠标在最右侧点击时导致X轴产生滚动条的问题2019-1-8 更新为2.0版本,修复大量bug,引用自制代码库预览图:使用要求:需要引入自制代码库:[hide]先引入tool.js 下载:蓝奏云再引入封装库base.js 下载:蓝奏云接着引入china.js 下载 : 蓝奏云[/hide]引入方法:以我现在的博客Typecho为例,我们需要在主题的header.ph...
