您的位置：首页 > Web前端 > JavaScript

js动态添加标签（四）

2010-08-13 14:56 393 查看

<!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 onclick="add()">添加内容</button>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航