JS练习之发布留言(创建节点、追加和插入节点操作)

最新推荐文章于 2022-12-17 09:58:30 发布

「已注销」

最新推荐文章于 2022-12-17 09:58:30 发布

阅读量200

点赞数

分类专栏： HTML/CSS JAVASCRIPT

本文链接：https://blog.csdn.net/weixin_41855546/article/details/107807935

版权

JAVASCRIPT 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

HTML/CSS

4 篇文章 0 订阅

订阅专栏

知识点：

创建节点
追加节点
插入节点

业务场景中，不会采取这种方式来发布留言，毕竟留言还是要写入数据库的，而且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则能获取得到，不知何故。

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS练习之发布留言(创建节点、追加和插入节点操作)

知识点：创建节点追加节点插入节点业务场景中，不会采取这种方式来发布留言，毕竟留言还是要写入数据库的，而且web框架貌似都封装了DOM操作，我猜的。根据B站分红老师的思路：1、获取元素2、绑定事件，处理事件代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>发布留言</title> </head> <body
复制链接

扫一扫

专栏目录