<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gbk" />
<title>demo</title>
<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 + '"';
        }
  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 + '"';
    }

  function add() {
 var elem = document.getElementById("demoElem");
 insertHtml('afterBegin', elem, "<dd>在文本前容器内插入内容</dd>");
 insertHtml('beforeEnd', elem, "<dd>在文本后容器内插入内容</dd>");
 insertHtml('beforeBegin', elem, "<dd>在文本前容器外插入内容</dd>");
 insertHtml('afterEnd', elem, "<dd>在文本后容器外插入内容</dd>");   
 }
</script>
</head>
<body>
<div class="noticeTitle">
<dl class="newsList noticeList" id="demoElem">
        <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>
</div>
<button οnclick="add()">添加内容</button>
</body>
</html>

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐