原生js完成提交评论，显示评论的效果的方法（代码示例）
发表时间：2025-11-11 来源：浏览器大全整理相关软件相关文章人气：
网页的本质就是超级文本标记语言，通过结合使用其他的Web技术（如：脚本语言、公共网关接口、组件等），可以创造出功能强大的网页。因而，超级文本标记语言是万维网（Web）编程的基础，也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言，是因为文本中包含了所谓“超级链接”点。
本篇文章给大家带来的内容是介绍原生js实现提交评论，显示评论的效果的方法（代码示例） 。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#box{
width: 900px;
margin: 0 auto;
}
#text{
width: 900px;
height: 400px;
margin: 0 auto;
background-color: #fbe1c8;
margin-top: 60px;
outline: none;
border-radius: 8px;
border:2px solid #e59a56;
overflow: hidden;
}
#tup{
float: right;
display: block;
margin-top: 10px;
margin-left: 20px;
width: 60px;
height: 36px;
background-color: #e69b57;
font-size: 18px;
line-height: 36px;
border-radius: 6px;
text-align: center;
color: #ffffff;
cursor:pointer;
}
#wad{
margin-top: 60px;
width: 880px;
}
#wad p{
font-size: 18px;
line-height: 24px;
border-bottom: 1px dashed #e69b57;
word-wrap: break-word;
}
</style>
</head>
<body>
<div id="box">
<div id="text" contenteditable="true"></div>
<span id="tup">提交</span>
<div id="wad"></div>
</div>
<script>
let Text = document.getElementById('text'),
Tup = document.getElementById("tup"),
Pl = document.getElementById("wad");
Tup.onclick = function(){
Li = "<p>" + Text.innerHTML + "</p>";
Text.innerHTML = "";
Pl.innerHTML += Li ;
}
</script>
</body>
</html>效果图：
以上就是原生js实现提交评论，显示评论的效果的方法（代码示例）的详细内容，更多请关注php中文网其它相关文章！
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。
