道非道 非常道

勤思、谨言、慎行、厚积、薄发

统计

web

天圆

经济 政治 军事

键康

[转] 关于 insertAdjacentHTML insertAdjacentText

 

 1添加html内容(insertAdjacentHTML和insertAdjacentText)
 2    dhtml提供了两个方法来进行添加，insertAdjacentHTML和insertAdjacentText
 3insertAdjacentHTML方法：在指定的地方插入html标签语句。
 4    原型：insertAdjacentHTML(swhere,stext)
 5    参数：
 6    swhere:指定插入html标签语句的地方，有四种值可以用：
 7              1.beforeBegin:插入到标签开始前
 8              2.afterBegin:插入到标签开始标记后
 9              3.beforeEnd:插入到标签结束标记前
10              4.afterEnd:插入到标签结束标记后
11              stext:要插入的内容
12      例：var sHTML="<input type=button onclick=" +     "go2()" + " value='Click Me'><BR>"
13      var sScript='<SCRIPT DEFER>'
14      sScript = sScript +     'function go2(){ alert("Hello from inserted script.") }'
15      sScript = sScript + '</script' + '>';
16      ScriptDiv.insertAdjacentHTML("afterBegin",sHTML + sScript);
17      在html正文中加入一行：
18    <DIV ID="ScriptDiv"></Div>
19     最终变成：
20    <DIV ID="ScriptDiv">
21       <input type=button onclick=go2() value='Click Me'><BR>
22       <SCRIPT DEFER>
23         function go2(){alert("Hello from inserted sctipt.")}'
24       </script>
25     </DIV> 
26     insertAdjacentText方法与insertAdjacentHTML方法类似，只不过只能插入纯文本，参数相同
27trackback:http://gmfzh.bokee.com/3680267.html 
28
29
30方法名称：insertHtml(where,el,html)
31
32参数介绍：
33where：插入位置。包括beforeBegin,beforeEnd,afterBegin,afterEnd。
34el：用于参照插入位置的html元素对象
35html：要插入的html代码
36
37源码如下：
38<script type="text/javascript">
39  <!--
40    function insertHtml(where, el, html){
41        where = where.toLowerCase();
42        if(el.insertAdjacentHTML){
43            switch(where){
44                case "beforebegin":
45                    el.insertAdjacentHTML('BeforeBegin', html);
46                    return el.previousSibling;
47                case "afterbegin":
48                    el.insertAdjacentHTML('AfterBegin', html);
49                    return el.firstChild;
50                case "beforeend":
51                    el.insertAdjacentHTML('BeforeEnd', html);
52                    return el.lastChild;
53                case "afterend":
54                    el.insertAdjacentHTML('AfterEnd', html);
55                    return el.nextSibling;
56            }
57            throw 'Illegal insertion point -> "' + where + '"';
58        }
59  var range = el.ownerDocument.createRange();
60        var frag;
61        switch(where){
62             case "beforebegin":
63                range.setStartBefore(el);
64                frag = range.createContextualFragment(html);
65                el.parentNode.insertBefore(frag, el);
66                return el.previousSibling;
67             case "afterbegin":
68                if(el.firstChild){
69                    range.setStartBefore(el.firstChild);
70                    frag = range.createContextualFragment(html);
71                    el.insertBefore(frag, el.firstChild);
72                    return el.firstChild;
73                }else{
74                    el.innerHTML = html;
75                    return el.firstChild;
76                }
77            case "beforeend":
78                if(el.lastChild){
79                    range.setStartAfter(el.lastChild);
80                    frag = range.createContextualFragment(html);
81                    el.appendChild(frag);
82                    return el.lastChild;
83                }else{
84                    el.innerHTML = html;
85                    return el.lastChild;
86                }
87            case "afterend":
88                range.setStartAfter(el);
89                frag = range.createContextualFragment(html);
90                el.parentNode.insertBefore(frag, el.nextSibling);
91                return el.nextSibling;
92            }
93            throw 'Illegal insertion point -> "' + where + '"';
94    }
95    
96  trackback: http://www.blogjava.net/Scott/archive/2007/08/30/141449.html
97

posted on 2009-07-09 10:37 星期五 阅读(368) 评论(0)  编辑  收藏 所属分类: web 开发


只有注册用户登录后才能发表评论。
网站导航: