web前端学习749（案例：简单版发布留言案例）

最新推荐文章于 2022-09-19 16:02:58 发布

香甜的甲基橙

最新推荐文章于 2022-09-19 16:02:58 发布

阅读量527

点赞数

分类专栏： web前端基础学习笔记 JavaScript 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_51249285/article/details/124307632

版权

web前端基础学习笔记同时被 2 个专栏收录

68 篇文章 13 订阅

订阅专栏

JavaScript

41 篇文章 3 订阅

订阅专栏

案例：简单版发布留言案例

案例分析

核心思路 : 点击按钮之后 , 就动态创建一个li ,添加到 ul里面。
创建 li 的同时 , 把文本域里面的值通过li.innerHTML赋值给 li
如果想要新的留言后面显示就用appendChild 如果想要前面显示就用insertBefore

<!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>
      li {
        background-color: pink;
        width: 300px;
        height: 30px;
        margin-bottom: 10px;
      }
    </style>
</head>
 
<body>
    <textarea name="" id="" cols="30" rows="10">123</textarea>
    <button>发布</button>
    <ul>
 
    </ul>
    <script>
        // 1 获取元素
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        // 注册事件  
        btn.onclick = function() {
            if(text.value == '') {   // 空
                alert('你没有输入内容');
                return false;
            }else {
              // （1）创建元素
              var li = document.createElement('li');
              // （2）添加内容  先有li 才能赋值
              li.innerHTML=text.value;
              // （3）添加元素
              //ul.appendChild('li');
              ul.insertBefore(li,ul.children[0]);
            }
        }
    </script>
</body>
 
</html>

在这里插入图片描述

香甜的甲基橙

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
web前端学习749（案例：简单版发布留言案例）

案例：简单版发布留言案例案例分析核心思路 : 点击按钮之后 , 就动态创建一个li ,添加到 ul里面。创建 li 的同时 , 把文本域里面的值通过li.innerHTML赋值给 li如果想要新的留言后面显示就用appendChild 如果想要前面显示就用insertBefore<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta na
复制链接

扫一扫