js实现动态添加内容

56 阅读 0 评论 37 点赞

我是靠谱客的博主乐观纸飞机，这篇文章主要介绍js实现动态添加内容，现在分享给大家，希望可以做个参考。

1.先来一段类似微博评论的代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/weibo.css">
</head>

<body>
    <div class="w">
        <div class="controls">
            <!-- <img src="./assets/tip.png" alt=""><br> -->
            <textarea placeholder="说点什么吧..." id="area" cols="30" rows="10" maxlength="200"></textarea>
            <div>
                <span class="useCount">0</span>
                <span>/</span>
                <span>200</span>
                <button id="send">发布</button>
            </div>

        </div>
        <div class="contentList">
            <ul>
                <!-- <li>

                </li>  -->
            </ul>
        </div>
    </div>
    <script>
        // 获取
        let area = document.getElementById('area')
        let send = document.getElementById('send')
        let ul = document.querySelector('ul')
        let useCount = document.querySelector('.useCount')

        //    监听
        send.addEventListener('click', function () {
            // 创建
            // 如果用户啥都没有输入,则不执行
            if (area.value.length === 0) return
            let li = document.createElement('li')
            ul.appendChild(li)
            li.innerHTML = ` <div class="info">
      
              <span>用户名</span>
              <p>${new Date().toDateString()}</p>
          </div>
          <div class="content">
              ${area.value}
               <a href="javascript:;">删除</a>
          </div>`

            // 清除样式
            area.value = ''
            useCount.innerHTML = '0'


        })

        // 文本域的输入属性，输入多少字符就统计多少
        area.addEventListener('input', function () {
            useCount.innerHTML = area.value.length
        })

        // 委托
        ul.addEventListener('click', function (e) {
            if (e.target.nodeName === 'A') {
                ul.removeChild(e.target.parentNode.parentNode)
            }
        })
    </script>
</body>

</html>

看下效果：

2.再来一个例子：

<!DOCTYPE>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
</head>
<!-- 动态添加与删除 -->
<script type="text/javascript">
 
    //创建函数
    function createButton() {
        //alert("获得");
        //创建新的 input按钮
        var all = document.createElement("input");
        //给元素添加属性
        all.type = "button";
        all.value = "确定";
        all.id = "did";
        //获得当前div并在div内部创建input
        document.getElementById("div1").appendChild(all);
    }
    /*删除按钮  */
    function deleteButton() {
        var ss = document.getElementById("did");
        document.getElementById("div1").removeChild(ss);
    }

    /* 获得链接 */
    function createLink() {
        //创建新的链接
        var ajj = document.createElement("a");
        ajj.href = "https://www.baidu.com/?tn=88093251_75_hao_pg";
        ajj.id = "ai";
        ajj.style.color = "red";
        //给a标签赋予名字
        ajj.innerText = "百度";
        //获取当前div并创建新链接
        document.getElementById("div1").appendChild(ajj);
    }

    //删除链接
    function deleteLink() {
        document.getElementById("div1").removeChild(document.getElementById("ai"));
    }

</script>

<body>
    <input type="button" value="增加按钮" onclick="createButton()">
    <input type="button" value="删除按钮" onclick="deleteButton()">
    <input type="button" value="增加链接" onclick="createLink()">
    <input type="button" value="删除链接" onclick="deleteLink()">
    <div style="width:300px;height:300px;border:1px  double  red;" id="div1">
        div
    </div>


</body>

</html>

看下效果：

3.再来一个例子：

<!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>事件委托
    </title>
</head>
<body>
    <div>
        <h4>购物车列表添加、删除</h4>
        <div>
            <label for="item.name">消费名称</label>
            <div>
                <input type="text" id="item-name" placeholder="输入购物名称">
                <button id="btn-add">添加</button>
            </div>
            <ul id="shopping-list">
                <!-- <li>
                    <p></p>
                    <button>删除</button>
                </li> -->
            </ul>
        </div>
    </div>
    <script>
        let btnAdd=document.querySelector('#btn-add')
        let itemName=document.querySelector('#item-name')
        let shoppingList=document.querySelector('#shopping-list')
        btnAdd.onclick=function(){
            shoppingList.insertAdjacentHTML('beforeend',`
            <li>
                    <p>${itemName.value}</p>
                    <button>删除</button>
                </li>
            `)
        }
        //事件委托
        shoppingList.onclick=function(e){
            if(e.target.tagName==='BUTTON'){
                e.target.parentNode.remove()
            }
            itemName.value=''
        }
    </script>
</body>
</html>

看下效果：

4.我在项目里的运用：

点击+号tag时，要动态新增一个输入框，还有一个删除按钮

代码如下：

   <!-- Attendant区域 -->
    <p class="choose-tag">Attendant</p>
    <div>
      <div class="attendant-area">
        <van-tag
          round
          color="#E7E7E7"
          text-color="#000"
          type="primary"
          @click="addAttendantFn"
          >+</van-tag
        >
        <span class="attendant-area-plus"> Add Attendant</span>
      </div>
      <ul id="add-row" @click="handleAttendantDetailDialog">
        <!-- 边框只显示底部线条 -->
        <!-- 这里时动态添加的内容 -->
      
      </ul>
    </div>

动态添加内容的代码如下：

   addAttendantFn() {
      console.log("点击增加操作框");
      let ul = document.getElementById("add-row");
      let li = document.createElement("li");
      ul.appendChild(li);

      li.innerHTML = `  <div style="width: 90%;  height: 32px;border: 1px solid #8e8e93; 
             margin-top: 17px;
             margin-left: 15px;
             border-radius: 10px;
             border-block-color: #8e8e93;">
            <span style="border-bottom: 1px solid #8e8e93; width: 44px; font-size: 15px;  margin-left: 6px;">Attendant</span>
            <span style="font-size: 13px;
              color: #8e8e93;
              margin-left: 10px;
              margin-right: 10px;">is a</span>
             <span style=" border-bottom: 1px solid #8e8e93;
             width: 44px;
             font-size: 15px;
             margin-left: 6px;
             color: #8e8e93;">Role</span>
            <span style="font-size: 13px;
            color: #8e8e93;
            margin-left: 10px;
            margin-right: 10px;">, works in</span>
            <span style="border-bottom: 1px solid #8e8e93;
             width: 44px;
             font-size: 15px;
             margin-left: 6px;
             color: #8e8e93;">Company</span><br>
           </div>

           <div>
             <a href="javascript:;" style="margin-left: 314px;
             color: red;
             font-size: 14px;">Delete</a>
           </div>
           
          `;
      // 委托
      ul.addEventListener("click", function (e) {
        if (e.target.nodeName === "A") {
          console.log("删除了");
          setTimeout(function () {
            console.log(e.target.parentNode.parentNode);
            //  ul.removeChild(e.target.parentNode.parentNode);
            ul.removeChild(e.target.parentNode.parentNode);
          }, 5);
        }
      });

      // this.showAttendant = true;
    },

其实，我个人在这里有疑惑的点是：我在动态添加内容的时候，其实样式已经丢失了，迫不得已我才使用了行内样式，有点突兀，目前我并没有探索到其他方法来解决样式丢失的问题。

而且还遇到的问题是，本来我点击Attendant会出现一个相关的控制面板，但是现在点击删除按钮的时候，虽然说删除功能可以实现，但是这个控制面板也弹出来了。