JS 添加刪除元素 /DOM

時間 2019-11-09

標籤添加刪除元素 dom 欄目 JavaScript 简体版

原文原文鏈接

<html>
<head>
<title>JS添加刪除元素</title>
<script type="text/javascript">

    function $(nodeId)
    {
        return document.getElementByIdx(nodeId);
    }
    function $Name(tagName)
    {
        return document.getElementsByTagName_r(tagName);
    }

    function replaceMsg()
    {
        var newNode = document.createElement("P");//建立一個P標籤
        newNode.innerHTML = "<font color='red'>替換後的文字</font>";
        var oldNode = $Name("P")[0];//獲取body裏面第一個p元素
        oldNode.parentNode.replaceChild(newNode,oldNode);//直接替換了標籤
    }

    function removeMsg()
    {
        var node = $("p2");//p標籤
        var nodeBtn = $("remove");//按鈕
        //node.parentNode.removeChild(node); //下面效果相同
        document.body.removeChild(node);//在body中刪除id爲P2的元素
        //nodeBtn.parentNode.removeChild(nodeBtn);//刪除該按鈕
        document.body.removeChild(nodeBtn);
        //document.body.removeNode();執行這條語句將清空body裏面的任何元素
    }

    function addbefore()
    {
        var newNode = document.createElement("p");//建立P標籤
        //var newText = document.createTextNode("前面添加的元素");
        //newNode.appendChild(newText);//與下面效果同樣
        newNode.innerHTML = "<font color='red'>前面添加的元素</font>";//書寫P標籤裏面的內容
        var oldNode = $("p3");//目標標籤
        //document.body.insertBefore(newNode,oldNode);
        oldNode.parentNode.insertBefore(newNode,oldNode);//在目標標籤前面添加元素
    }

    function addlast()
    {
        var newNode = document.createElement("p");//建立P標籤
        //var newText = document.createTextNode("後面添加的元素");
        //newNode.appendChild(newText);//與下面效果同樣
        newNode.innerHTML = "<font color='red'>後面添加的元素</font>";
        var oldNode = $("p3");

        oldNode.appendChild(newNode);
        //document.body.appendChild(newNode);//若是使用該方法,則在body的最後添加元素
    }

    window.onload = function addArrayMsg()
    {
        var arrayMsg = ['one','two','three','four','five'];//建立數組
        var fragment = document.createDocumentFragment();//建立文檔片斷
        var newNode ;
        for (var i=0 ;i<arrayMsg.length ;i++ )
        {
            newNode = document.createElement("P");//建立P標籤
            var nodeText = document.createTextNode(arrayMsg[i]);//建立文本標籤,value爲數組裏面的值
            newNode.appendChild(nodeText);//
            fragment.appendChild(newNode);//把P標籤追加到fragment裏面
        }
        document.body.appendChild(fragment);//把fragment追加到body裏面
    }javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。