插入元素 insertAdjacentHTML

如果你想在网页中插入
你可以：

1
2
3
4
5
var a = document.createElement('a');
a.id = "linkA";
a.target="_blank";
a.href="http://vingojw.github.io";
document.body.appendChild(a);

但是如果不想通过这种方式，想用文本的形式创建。
就像操作css时，如果你不想这样

1
2
3
4
5
obj.style.height = '10px';
obj.style.width = '10px';
......

你可以 obj.style.cssText="height:10px;width:10px;border;1px solid red;......";

可以使用以下例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>兼容浏览器的insertAdjacentHTML</title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta http-equiv='content-type' content='text/htm;charset=utf-8' />
<style type="text/css">
* {margin:0; padding:0;}
body {background-color:#fff}
dl, dd {margin:20px;}
.color_1 {color:#F7941D; border:1px solid #F7941D;}
.color_2 {color:#f00; border:1px solid #f00;}
.color_3 {color:#01FE34; border:1px solid #01FE34;}
.color_4 {color:#F49AC1; border:1px solid #F49AC1;}
.color_5 {color:#00AEEF; border:1px solid #00AEEF;}
.color_6 {color:#DB00EF; border:1px solid #DB00EF;}
.color_7 {color:#00CCFD; border:1px solid #00CCFD;}
</style>
</head>
<body>
<script type='text/javascript'>
/**
*
*
* @param {HTMLElement} el
* @param {String} where beforeBegin、afterBegin、beforeEnd、afterEnd
* @param {String} html
*/
function insertHTML(el, where, html) {
     if (!el) {
          return false;
     }
     where = where.toLowerCase();
     if (el.insertAdjacentHTML) {//IE
          el.insertAdjacentHTML(where, html);
     } else {
          var range = el.ownerDocument.createRange(),
               frag = null;
          switch (where) {
               case "beforebegin":
                    range.setStartBefore(el);
                    frag = range.createContextualFragment(html);
                    el.parentNode.insertBefore(frag, el);
                    return el.previousSibling;
               case "afterbegin":
                    if (el.firstChild) {
                         range.setStartBefore(el.firstChild);
                         frag = range.createContextualFragment(html);
                         el.insertBefore(frag, el.firstChild);
                    } else {
                         el.innerHTML = html;
                    }
                    return el.firstChild;
               case "beforeend":
                    if (el.lastChild) {
                         range.setStartAfter(el.lastChild);
                         frag = range.createContextualFragment(html);
                         el.appendChild(frag);
                    } else {
                         el.innerHTML = html;
                    }
                    return el.lastChild;
               case "afterend":
                    range.setStartAfter(el);
                    frag = range.createContextualFragment(html);
                    el.parentNode.insertBefore(frag, el.nextSibling);
                    return el.nextSibling;
          }
     }
}
function btnHandler() {
     var elem = document.getElementById('abc');
    
     insertHTML(elem, 'beforeBegin', '<dd class="color_2">上一个兄弟节点previousSibling</dd>');
     insertHTML(elem, 'beforeEnd', '<dd class="color_3">最后一个节点lastChild</dd>');
     insertHTML(elem, 'afterBegin', '<dd class="color_4">第一个节点firstChild</dd>');
     insertHTML(elem, 'afterEnd', '<dd class="color_5">下一个兄弟节点nextSibling</dd>');
}
</script>
<button onclick="btnHandler();">insertAdjacentHTML</button>
<dl class="color_1" id="abc">
     <dd><a href="#">今天采访出来，天上下雨，那个偏僻的地方根本没出租车的影子</a></dd>
     <dd><a href="#">今天采访出来，天上下雨，那个偏僻的地方根本没出租车的影子</a></dd>
     <dd><a href="#">今天采访出来，天上下雨，那个偏僻的地方根本没出租车的影子</a></dd>
     <dd><a href="#">今天采访出来，天上下雨，那个偏僻的地方根本没出租车的影子</a></dd>
     <dd><a href="#">今天采访出来，天上下雨，那个偏僻的地方根本没出租车的影子</a></dd>    
</dl>
</body>
</html>