知识点:
- 创建节点
- 追加节点
- 插入节点
业务场景中,不会采取这种方式来发布留言,毕竟留言还是要写入数据库的,而且web框架貌似都封装了DOM操作,我猜的。
根据B站分红老师的思路:
1、获取元素
2、绑定事件,处理事件
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>发布留言</title>
</head>
<body>
<div>
<textarea rows="20" cols="40"></textarea>
<button type="submit">发布</button>
<ul></ul>
</div>
<script type="text/javascript">
// 获取按钮
var btn = document.querySelector("button")
var content = document.querySelector("textarea")
var ul = document.querySelector("Ul")
btn.onclick = function(){
var li = document.createElement("li");
li.innerHTML = content.value
ul.insertBefore(li, ul.children[0])
console.log(content.value)
}
</script>
</body>
</html>
值得注意的是,createElement
后,数据只是保存在内存中,需要写入页面才能显示出来,可使用appendChild
和insertBefore
来写入。
在练习的过程中发现,貌似document不能进行某些链式操作,如
var content = document.querySelector("textarea").value
无法获取到value值,content.value
则能获取得到,不知何故。