兼容IE、FF的insertAdjacentHTML方法

最新推荐文章于 2018-06-19 23:12:58 发布

royzhou20081011

最新推荐文章于 2018-06-19 23:12:58 发布

阅读量123

点赞数

分类专栏： Javascript 文章标签： IE HTML EXT JavaScript Blog ViewUI

本文链接：https://blog.csdn.net/royzhou20081011/article/details/83394258

版权

Javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript">
  <!--
    function insertHtml(where, el, html){
        where = where.toLowerCase();
        if(el.insertAdjacentHTML){
			switch(where){
				case "beforebegin":
					el.insertAdjacentHTML('BeforeBegin', html);
					return el.previousSibling;
				case "afterbegin":
					el.insertAdjacentHTML('AfterBegin', html);
					return el.firstChild;
				case "beforeend":
					el.insertAdjacentHTML('BeforeEnd', html);
					return el.lastChild;
				case "afterend":
					el.insertAdjacentHTML('AfterEnd', html);
					return el.nextSibling;
			}
			throw 'Illegal insertion point -> "' + where + '"';
        } else {
			var range = el.ownerDocument.createRange();
			var frag;
			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);
						return 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);
						return el.lastChild;
					}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;
				}
				throw 'Illegal insertion point -> "' + where + '"';
		}
	}

	-->
</script>
</HEAD>

<BODY>
<div id="aa" >click the button to insertAdjacentHTML<br/></div>
<input type="button" value='add' onclick="add();" />
</BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
var index = 0;
function add() {
	insertHtml("afterBegin",document.getElementById("aa"),"<input type='text' value=" + index++ + " /><br/>");
	insertHtml("beforeEnd",document.getElementById("aa"),"<input type='text' value=" + index++ + " /><br/>");
}
//-->
</SCRIPT>