Lesson-7

新增 html,append,before,after,remove

html: function (value) {
    if (value === undefined) {
        return this[0].innerHTML;
    } else {
        for (var i = 0; i < this.length; i++) {
            this[i].innerHTML = value;
        }
    }
    return this;
}

html()要领我就用了这类很愚昧的要领完成了!比起之前的data,attr,css什么的简朴多了,人人能够本身继承完美.

接着是我们的重头戏,3个文档插进去.我找到了一个原生js叼叼的要领

insertAdjacentHTML 来让我们去看下MDN是怎样诠释的

概述

insertAdjacentHTML() 将指定的文本剖析为 HTML 或 XML，然后将效果节点插进去到 DOM 树中的指定位置处。该要领不会从新剖析挪用该要领的元素，因而不会影响到元素内已存在的元素节点。从而能够防止分外的剖析操纵，比直接运用 innerHTML 要领要快。

语法

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

beforebegin
在 element 元素的前面。
afterbegin
在 element 元素的第一个子节点前面。
beforeend
在 element 元素的末了一个子节点背面。
afterend
在 element 元素的背面。
text 是字符串，会被剖析成 HTML 或 XML，并插进去到 DOM 树中。

兼容性

几乎神器有木有?!

所以我们写一个如许的要领吧!

function domAppend(elm, type, str) {  //完成append、after、before操纵
    elm.insertAdjacentHTML(type, str);
}

然后只需要传对应参数就好了!云云简朴

append: function (str) {
    for (var i = 0; i < this.length; i++) {
        domAppend(this[i], 'beforeend', str);
    }
    return this;
},
before: function (str) {
    for (var i = 0; i < this.length; i++) {
        domAppend(this[i], 'beforeBegin', str);
    }
    return this;
},
after: function (str) {
    for (var i = 0; i < this.length; i++) {
        domAppend(this[i], 'afterEnd', str);
    }
    return this;
}

接着是remove要领,在这我只做删除本身节点,就没继承拓展了.人人能够自行完美

remove: function () { //只能删除本身
    for (var i = 0; i < this.length; i++) {
        this[i].parentNode.removeChild(this[i]);
    }
    return this;
}

您给予的star,就是给代码给予魂魄.

github地点: https://github.com/MeCKodo/forchange/tree/master/lesson-7
可想完成一个本身的简朴jQuery库？(七)：http://segmentfault.com/a/1190000004018813