添加评论功能的简单实现

最新推荐文章于 2023-10-29 06:16:03 发布

京都小白

最新推荐文章于 2023-10-29 06:16:03 发布

阅读量589

点赞数

分类专栏：前端文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_53602804/article/details/128787654

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

功能很简陋，但是很实用，主要用的是DOM里的兄弟节点插入操作

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css"> 
</head>
<body>
<input type="text">
<button type="submit">提交</button>
<ul>
  <li>
    这件事情没什么好评价的
  </li>
</ul>
  <script src="style.js"></script> 
</body>
</html>

var input = document.querySelector('input');
var button = document.querySelector('button');
var ul = document.querySelector('ul');
button.οnclick=function(){
    if(input.value=='')
    alert("您没有输入内容");
    else{
    var li = document.createElement('li');
    li.innerHTML=input.value;
    ul.appendChild(li);
    input.value=" ";
    }

}

*{
    margin:0;
    padding:0;
}
ul li{
    background-color: aqua;
    border-bottom: 1px solid black;
    line-height: 1rem;
    margin:1rem 0;
}
input{
    top:20%;
    left:5%;
    position:absolute;
}
button{
    position: absolute;
    left:15%;
    top:20%;
}
ul{
    left:6%;
    position:absolute;
    top:30%;
    width:20%;
}