可想自己造一个jQuery库?(八)

  • A+
所属分类:jQuery

Lesson-7

新增 html,append,before,after,remove

html() 方法我就用了这种很愚蠢的方法实现了!比起之前的data,attr,css什么的简单多了,大家可以自己继续完善.

接着是我们的重头戏,3个文档插入.我找到了一个原生js叼叼的方法

insertAdjacentHTML 来让我们去看下MDN是怎么解释的

概述

insertAdjacentHTML() 将指定的文本解析为 HTML 或 XML,

然后将结果节点插入到 DOM 树中的指定位置处。该方法不会重新解析

调用该方法的元素,因此不会影响到元素内已存在的元素节点。

从而可以避免额外的解析操作,比直接使用 innerHTML 方法要快。

语法

element.insertAdjacentHTML(position, text); position 是相对于 element 元素的位置,并且只能是以下的字符串之一:

beforebeginelement 元素的前面。 afterbeginelement 元素的第一个子节点前面。 beforeendelement 元素的最后一个子节点后面。 afterendelement 元素的后面。 text 是字符串,会被解析成 HTMLXML,并插入到 DOM 树中。

兼容性

| Chrome | Firefox | IE | Opera | Safari | | -------- | -----: | :----: | | 1.0 | 8.0 | 4.0 | 7.0 | 4.0|

简直神器有木有?!

所以我们写一个这样的方法吧!

然后只需要传对应参数就好了!如此简单

接着是remove方法,在这我只做删除自身节点,就没继续拓展了.大家可以自行完善

您给予的赞,就是给代码赋予灵魂.

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: