点击切换帐号登陆
帐号密码登陆

如何删除与替换节点?

# 删除与替换节点

## 1. removeChild(node)

* 必须父元素上调用
* 参数是要移除的节点
* 节点列表会自动更新

-------------------------------

## 2. replaceChild(arg1, arg2)

* 用新节点替换掉原来的节点
* 参数1是新节点
* 参数2是旧节点

-------------------------------

## 3. 示例源码

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除与替换</title>
</head>
<body>
<input type="text" name="comment">
<ul></ul>

<script>
// 给留言板添加删除与撤回功能
var comment = document.getElementsByTagName('input').namedItem('comment');
var list = document.getElementsByTagName('ul').item(0);

comment.onkeydown = function (event) {
if (event.keyCode === 13) {
var li = document.createElement('li');
li.innerHTML = comment.value
+ '<a href="javascript:;" onclick="del(this)">删除</a>'
+ '<a href="javascript:;" onclick="recall(this)">撤回</a>';

// 如果当前留言列表为空
if (list.childElementCount === 0) {
// 则插入到列表中
list.appendChild(li);
} else {
// 否则就应该插入到第一条留言之前
var first = list.firstElementChild;
list.insertBefore(li, first);
}
comment.value = '';
}
}

// 删除
function del(ele) {
list.removeChild(ele.parentElement);
}

// 撤回
function recall(ele) {
comment.value = ele.parentElement.firstChild.nodeValue;
// 创建一个空节点
var empty = document.createElement(null);
// 用空节点替换掉原来的留言列表项
list.replaceChild(empty,ele.parentElement);
}
</script>
</body>
</html>
```


任务

?不会了怎么办
无数据提示暂无评论哟...我要评论
网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号