原生js 插入html

最新推荐文章于 2025-06-27 14:38:28 发布

冷色系微风爱丶

最新推荐文章于 2025-06-27 14:38:28 发布

阅读量3.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： JS vue

本文链接：https://blog.csdn.net/czy279470138/article/details/108058874

vue 同时被 2 个专栏收录

20 篇文章

订阅专栏

4 篇文章

订阅专栏

本文详细介绍了如何使用原生JavaScript的`insertAdjacentHTML`方法动态插入HTML到元素中，适用于前端开发人员进行DOM操作，提升网页动态更新的效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

小白仅作记录

      // 客服点击发送事件
      submitChat(){
        let dialogueInput = document.getElementById('text') // input 框
        let dialogueContain = document.getElementById('chat') // 父元素 要插入的
        let chatBody = document.getElementById('chatBody') // 最外层 overflow
        let user = '客服'
        let time = '2020-05-06'
        if (dialogueInput.value == '') {
          console.log('内容不能为空')
        }else { 
        let chatli = "<li class='chat_content_body_customer_msg'> " +
              "<div class='portrait'><img src="+ this.compress +" alt='头像'> </div>" +
              "<div class='msgBox'>" +
                "<div class='time'>" +
                  user +" <span> "+ time +" </span>" +
                "</div>" +
                "<div class='wraper-box'>" +
                  "<div class='wraper'>" +
                    "<p>"+dialogueInput.value+"</p>" +
                  "</div>" +
                "</div>" +
              "</div>" +
            "</li>"

            // 插入内容
            dialogueContain.insertAdjacentHTML('beforeEnd',chatli)
            chatBody.scrollTop = chatBody.scrollHeight;
            // 清空输入框内容
            dialogueInput.value = null;
        }
      },