您的位置：首页 > 其它

动态创建2016/4/21

2016-04-21 09:41 393 查看

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function() {

var oText = document.getElementById('text1');
var oBtn = document.getElementById('btn');
var oUl = document.getElementById('ul1');

oBtn.onclick = function() {

/*
document.createElement(标签名称); 创建元素
*/

var oLi = document.createElement('li');

//oLi.innerHTML = oText.value + '<a href="javascript:;">删除</a>';
oLi.innerHTML = oText.value;

var oA = document.createElement('a');
oA.innerHTML = '删除';
oA.href = 'javascript:;';
oA.onclick = function() {

/*
父级.removeChild(要删除的元素); 删除元素
*/

oUl.removeChild( this.parentNode );

}

oLi.appendChild( oA );

//添加到页面中
/*
父级.appendChild(要添加的元素) 方法 追加子元素
*/
//oUl.appendChild( oLi );

/*
父级.insertBefore(新的元素，被插入的元素) 方法 在指定元素前面插入一个新元素
在ie下如果第二个参数的节点不存在，会报错
在其他标准浏览器下如果第二个参数的节点不存在，则会以appendChild的形式进行添加
*/
//oUl.insertBefore( oLi, oUl.children[0] );

if ( oUl.children[0] ) {
oUl.insertBefore( oLi, oUl.children[0] );
} else {
oUl.appendChild( oLi );
}

}

}
</script>
</head>

<body>
<input type="text" id="text1" /><input type="button" value="留言" id="btn" />
<ul id="ul1"></ul>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航