《JavaScriptDOM编程艺术》读后感4:在元素前后插入元素

 2016-05-28 22:41

今天看的篇幅很短,但我感觉很有用。在元素前、后插入相应元素(<P>、<img>等),这东西在以后使用中会比较广泛,所以还是做个收集整理吧。


元素前插入元素

JavaScriptDOM原本就有的方法,代码如下:

parentElement.insertBefore(newElement,targetElement);

newElement是指导想插入的元素;targetElement是目标元素,也就是说你想把目标元素(newElement)插在哪个前面;这两个语法项通过英文应该很容易理解;parentElement是指目标元素的父集。DOM里,元素节点的父元素必须是一个元素节点(属性节点和文本节点的子元素不允许是元素节点)。DOM里面,还有一个叫做parentNode的属性,它是获取元素的父元素,所以呢,我们就可以把这个代码简化看成这样:

targetElement.parentNode.insertBefore(newElement,targetElement);


元素后插入元素

按我是思维,JavaScriptDOM里面应该有一个相应的insertAfter()方法的,但却偏偏没有。还好,“巨人们”已经帮我们完成了这个漏失的function,下面就是我写这个文章的目的:

function insertAffter(newElement,targetElement) {
    var parent=targetElement.parentNode;
    if (parent.lastchild==targetElement) {
        parent.appendChild(newElement);
        }else{
        parent.insertBefore(newElement,targetElement.nextSibling);
    }
}

思维逻辑大概是这样的:获取父集,如果元素的是最后一元素,就在它屁股后面加上一个新元素;如果不是最后一个呢?就在目标元素下一个元素前面插入一个新元素。

这里用到了一个nextSibling的方法,它是将指获取目标元素的相邻元素。lastChild

小节

其实在今天这个学习中,我们不但学会了如何插入元素,还接触到了几个DOM方法和属性:大家不妨记住它们:

  • parentNode属性:元素的父元素;

  • lastchild属性:目标的最后一个元素;

  • appendchild方法:目标加入后面加入一个元素;

  • insertBefore方法:元素后插入一个元素;

  • nextSibling属性:元素后面的相邻元素;


《JavaScriptDOM编程艺术》读后感:

  1. 初次接触JavaScriptDOM的感觉
  2. 第六章,一个常规事件的逻辑
  3. 3个方法来改变DOM结构树
  4. 在元素前后插入元素
  5. 培养function的逻辑思维
  6. 细说下getNextElement函数
  7. 动画方法moveElement()
  8. 实战中的global.js
  9. 整站练习(附源文件)
作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论:

 评论列表

vultrvps 2016-05-30  09:17

朋友,交换链接吗?

蟹胖 2016-06-01  18:03

你好,你是什么链接地址