一、案例分析

核心思路：点击按钮之后，就动态创建 li，添加到 ul 里面；
创建 li 的同时，把文本域里面的值通过 li.innerHTML 赋值给 li；
显示新的留言（后面显示：appendChild || 前面显示：insertBefore）

二、实现过程

1. 基本骨架

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {padding: 100px;}textarea {width: 200px;height: 100px;border: 1px solid pink;outline: none;resize: none;}ul {margin-top: 50px;}li {width: 300px;padding: 5px;background-color: rgb(245, 209, 243);color: red;font-size: 14px;margin: 15px 0;}</style>
</head>
<body><textarea name="" id=""></textarea><button>发布</button><ul></ul><script></script>
</body>

2. 获取元素

 <script>// 1. 获取元素var btn = document.querySelector('button');var text = document.querySelector('textarea');var ul = document.querySelector('ul');</script>

3. 注册事件

<script>// 1. 获取元素var btn = document.querySelector('button');var text = document.querySelector('textarea');var ul = document.querySelector('ul');// 2.注册事件btn.onclick = function () {// (1) 创建元素var li =document.createElement('li');// (2) 添加元素ul.appendChild(li);}
</script>

然而，仅仅如此，在没有输入内容的情况下，也会创建和添加元素。因此，需要加个判断：

<script>// 1. 获取元素var btn = document.querySelector('button');var text = document.querySelector('textarea');var ul = document.querySelector('ul');// 2. 注册事件btn.onclick = function() {if (text.value == '') {alert('您还没有输入内容');return false;} else {// console.log(text.value);// (1) 创建元素var li = document.createElement('li');// (2) 添加元素ul.appendChild(li);}}
</script>

给添加的 li 赋值

<script>// 1. 获取元素var btn = document.querySelector('button');var text = document.querySelector('textarea');var ul = document.querySelector('ul');// 2. 注册事件btn.onclick = function() {if (text.value == '') {alert('您没有输入内容');return false;} else {// console.log(text.value);// (1) 创建元素var li = document.createElement('li');li.innerHTML = text.value;// (2) 添加元素ul.appendChild(li);  // 最新留言插入到最后}}</script>

如要实现发布的最新留言永远在最前面，则修改 ul.appendChild(li) 为 ul.insertBefore(li,ul.children[0]);

三、完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {padding: 100px;}textarea {width: 200px;height: 100px;border: 1px solid pink;outline: none;resize: none;}ul {margin-top: 50px;}li {width: 300px;padding: 5px;background-color: rgb(245, 209, 243);color: red;font-size: 14px;margin: 15px 0;}</style>
</head>
<body><textarea name="" id=""></textarea><button>发布</button><ul></ul><script>// 1. 获取元素var btn = document.querySelector('button');var text = document.querySelector('textarea');var ul = document.querySelector('ul');// 2. 注册事件btn.onclick = function() {if (text.value == '') {alert('您没有输入内容');return false;} else {// console.log(text.value);// (1) 创建元素var li = document.createElement('li');li.innerHTML = text.value;// (2) 添加元素// ul.appendChild(li); // 最新发布的放到最后面ul.insertBefore(li,ul.children[0]); // 最新发布的发最前面}}</script>
</body>
</html>

前端学习笔记之创建节点与添加节点案例相关推荐

Web前端学习笔记——HTML5与CSS3之购物车宣传案例
<购物车宣传>案例综合运用h5c3知识且进行一定扩展能使用jquery完成网页常见交互行为实际工作开发当中能应对活动宣传页全屏切换效果通过鼠标的滚轮切换全屏页面使用fullp ...
Web前端学习笔记——HTML5与CSS3之QQ TIM案例
<QQ TIM>案例 Stellar插件描述视差滚动(Parallax Scrolling)指网页滚动过程中, 多层次的元素进行不同程度的移动,视觉上形成立体运动效果的网页展示技术主 ...
前端学习笔记-jQuery-jQuery动画（王者荣耀手风琴案例）
案例:王者荣耀手风琴分析: 鼠标经过某个小li 有两步操作: 1.当前小li 宽度变为 224px, 同时里面的小图片淡出,大图片淡入 2.其余兄弟小li宽度变为69px, 小图片淡入, 大图片淡出 ...
JavaScript学习笔记：创建、添加与删除节点
JavaScript学习笔记:创建.添加与删除节点文章目录 JavaScript学习笔记:创建.添加与删除节点一.DOM对象节点类型二.创建节点 1.创建元素节点 2.创建文本节点 3.创建属性 ...
oracle rac添加监听,【学习笔记】Oracle 10G RAC增加节点时手动注册监听服务的案例步骤...
[学习笔记]Oracle 10G RAC增加节点时手动注册监听服务的案例步骤时间:2016-10-22 22:53 来源:Oracle研究中心作者:HTZ 点击: 次天萃荷净 Ora ...
Hadoop学习笔记—13.分布式集群中节点的动态添加与下架
Hadoop学习笔记-13.分布式集群中节点的动态添加与下架开篇:在本笔记系列的第一篇中,我们介绍了如何搭建伪分布与分布模式的Hadoop集群.现在,我们来了解一下在一个Hadoop分布式集群中,如 ...
2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单
2017-2-15从0开始前端学习笔记-图片-表格-表单标签图片图片<img src="#" alt="文本说明不能加载图片时显示" title= ...
LabView学习笔记（八）：属性节点
Labview学习笔记: LabView学习笔记(一):基础介绍 LabView学习笔记(二):滤波器实验 LabView学习笔记(三):基本控件 LabView学习笔记(四):动态数据类型 LabV ...
前端学习笔记（js基础知识）
前端学习笔记(js基础知识) JavaScript 输出 JavaScript 数据类型常见的HTML事件 DOM 冒泡与捕获流程控制语句 for..in 计时器 let,var,const的区别 ...

前端学习笔记之创建节点与添加节点案例

发布留言案例实现

一、案例分析

二、实现过程

三、完整代码

前端学习笔记之创建节点与添加节点案例相关推荐

最新文章

热门文章

前端学习笔记之 创建节点 与 添加节点案例

发布留言案例实现

一、案例分析

二、实现过程

三、完整代码

前端学习笔记之 创建节点 与 添加节点案例相关推荐

最新文章

热门文章

前端学习笔记之创建节点与添加节点案例

前端学习笔记之创建节点与添加节点案例相关推荐