【javascript】实现类后端增删改功能（附源码）

☆ 在学习javascript之初会有很多练手的例子，当还没有接触到后端（java ptython）这些的时候，老师会让我们自己模拟实现一个纯javascript的类后端的增删改效果。

☆ 本文将通过后端的思路，抛弃那些复杂的逻辑，纯前端实现一套增删改查的效果。如果明白了这一套逻辑，那么以后学到ajax的时候再和服务端联调，就会容易理解的多。

☆ 本文通过逻辑讲述，还有完整的源码，源码并且添加了详细的注释与打印输出逻辑，希望你可以学会

1、html布局

2、添加的实现

3、删除的实现

4、修改的实现

5、完整源码附详细注释

1、html布局

顶部布局input输入框做为输入内容区域，

按钮添加addContent事件。

底部预备了id为contentList的div区域用于展示评论列表


<body>
   <div class="box">
     <div class="comment-box">
         <input type="text" id="inputContent" />
         <button onclick="addContent()">添加</button>
      </div>
      <p>评论区</p>
      <div class="content-list" id="contentList">
 
      </div>
   </div>
</body>

2、添加的实现

描述：当输入框输入内容后，点击添加按钮，需要在评论的区域添加一条子div区域，子区域内追加填充评论文字的span元素，后面再追加用于删除的子按钮，再追加用于修改的子按钮。

便于后续模拟在数据库里添加数据，提前定义一个变量 list = [] 定义一个初始化 id = 0 。因为我们每添加的一条评论文案都会填充到这个数组里。而每次删除，修改操作，怎么知道操作的是当前这一行数据呢，当然是要准备一个id，每一行的id都是唯一的。

当添加完成后，再把输入框的内容清空。

3、删除的实现

第2步在添加的时候，我们给每一条数据添加了id，

唯一的id值。删除的时候用得到。

意思就是要删除，得知道删除的是哪条数据。

所以再删除的时候调用一个deleteOne的方法，通过当前元素id，去list数组里进行匹配，

然后将这一条id所属的list元素删除。

再根据当前元素，获取父DOM元素，进行删除。这样，一条评论就删除了。

4、修改的实现

跟第3步类似，点击修改的时候，因为我们给每一条数据添加了id属性，唯一的id值。

修改的时候，利用这个id值操作对应的DOM与数据。

但与删除略有不同。修改操作需要通过当前id值，获取到当前所属的评论文本内容，

然后将其给输入框赋值。当再次点添加按钮的时候，还要通过当前id替换掉之前添加的值。

5、完整源码附详细注释

CSS部分

HTML部分


<div class="box">
    <div class="comment-box">
       <input type="text" id="inputContent" />
       <button onclick="addContent()">添加</button>
    </div>
    <p>评论区</p>
    <div class="content-list" id="contentList"></div>
</div>

javascript部分

相关阅读:
阿里云服务器登录、安装MySql、配置Python、GO环境
多分辨率展开
pywinauto exists 方法
按图搜索1688商品（拍立淘）中国站
行政处罚有哪些？
Intellij 自定义MyBatis映射文件模板
Nginx面试常问题&工作原理揭秘
Spring Boot简介
从0到1实现五子棋游戏！！
环境感知——自动驾驶模型训练（菜鸟版本）

原文地址：https://blog.csdn.net/xingyu_qie/article/details/127813158