# Lesson-7
===
新增 html,text,append,before,after,remove
```javascript
html: function (value) {
if (value === undefined && this[0].nodeType === 1) {
return this[0].innerHTML;
} else {
for (var i = 0; i < this.length; i++) {
this[i].innerHTML = value;
}
}
return this;
},
text: function (val) {
if (val === undefined && this[0].nodeType === 1) {
return this[0].innerText;
} else {
for (var i = 0; i < this.length; i++) {
this[i].innerText = val;
}
}
}
```
`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 樹中。
### 兼容性
| Chrome | Firefox | IE | Opera | Safari |
| -------- | -----: | :----: |
| 1.0 | 8.0 | 4.0 | 7.0 | 4.0|
簡直神器有木有?!
所以我們寫一個這樣的方法吧!
```javascript
function domAppend(elm, type, str) { //實現append、after、before操作
elm.insertAdjacentHTML(type, str);
}
```
然后只需要傳對應參數就好了!如此簡單
```javascript
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方法,在這我只做刪除自身節點,就沒繼續拓展了.大家可以自行完善
```javascript
remove: function () { //只能刪除自身
for (var i = 0; i < this.length; i++) {
this[i].parentNode.removeChild(this[i]);
}
return this;
}
```
您給予的star,就是給代碼賦予靈魂.
