js在頁面中添加一個元素 —— 添加彈幕

參考地址 【往下拉 —— 使用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>

var dan = document.getElementById("dan_input").value;   ———— 通過value屬性可以獲得用戶在input中輸入的內容

document.createElement("BR") ———— 運用document中的createElement方法 動態創建元素

node.setAttribute("class","danmu");  ———— 設置 class=“xxxx”

 

appendChild() 方法可向節點的子節點列表的末尾添加新的子節點。如果文檔樹中已經存在了 newchild，它將從文檔樹中刪除，然后重新插入它的新位置。

如果 newchild 是 DocumentFragment 節點，則不會直接插入它，而是把它的子節點按序插入當前節點的 childNodes[] 數組的末尾。

可以使用 appendChild() 方法移除元素到另外一個元素

 

元素節點 和 文本節點

 

 

 

三、CSS

另一篇博客：https://www.cnblogs.com/expedition/p/11335388.html