js在页面中添加一个元素 —— 添加弹幕

时间：2019-08-11 17:28:58 阅读：91 评论：0 收藏：0 [点我收藏+]

参考地址【往下拉 —— 使用HTML DOM appendChild() 方法实现元素的添加】

一、创建 HTML

<div class="right_liuyan">
     <marquee id="liuyan" scrollAmount=2 width=200 height=300 direction=up > 
         <div class="danmu">
         <p>竟然还有文字识别！！！</p>
         </div>
     <br />
     
     <div class="danmu">
         <p>这家网店的书就是好</p>
         </div>
         <br />
         
         <div class="danmu">
         <p>为啥都是计算机的书？</p>
         </div>
         <br />
     
     <div class="danmu">
         <p>还有手机版！！！！！！还有手机版！！！！！</p>
         </div>
         <br />
         
     </marquee>
     
     <input id="dan_input" type="text" value="">
     <button onclick="return addDanMu()">添加弹幕</button>
     
        
        
</div>

技术图片

发送弹幕: 啦啦啦啦啦啦啦

技术图片

二、addDanMu() 函数

<script>
function addDanMu(){
    var dan = document.getElementById("dan_input").value;       
    if(dan ==""){
        alert("请输入弹幕~");
        return false;
    }else{
        document.getElementById("dan_input").value = "";   //清空 弹幕输入框
        var br = document.createElement("BR");  // <br />
        var node = document.createElement("DIV");  // <div>
        var aNode = document.createElement("P");   // <p>
        node.setAttribute("class","danmu");
        var textnode = document.createTextNode(dan);   // 创建个 文本节点， 将用户输入的弹幕，存入 创建的 元素节点 <p>  中
        aNode.appendChild(textnode);
        node.appendChild(aNode);
        document.getElementById("liuyan").appendChild(br);
        document.getElementById("liuyan").appendChild(node);
        return true;
    }
    
    
}

</script>