如何將元素添加到JSON對象?

如何將元素添加到JSON對象?下面本篇文章就來給大家介紹一下使用JavaScript將元素添加到JSON對象的方法,希望對大家有所幫助。
如何將元素添加到JSON對象?
原文地址:如何將元素添加到JSON對象?

爲了將鍵/值對添加到JSON對象,我們使用點表示法或方括號表示法。這兩種方法都被廣泛接受,下面通過示例來了解一下。

示例1:使用點表示法將{"prop_4" : "val_4"}添加到JSON對象中

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
    </head>

    <body>
        <h2 style="color:green;">如何將元素添加到JSON對象?</h2>

        <p id="up" style=" font-weight: bold"></p>

        <button onclick="fun()">單擊以添加</button>

        <p id="down" style="color:green; font-weight: bold" ;></p>

        <script>
            var demo = {
                prop_1: "val_1",
                prop_2: "val_2",
                prop_3: "val_3"
            };
            var p_up =
                document.getElementById("up");
            var p_down =
                document.getElementById("down");
            p_up.innerHTML =
                JSON.stringify(demo);

            function fun() {
                demo.prop_4 = "val_4";
                p_down.innerHTML = JSON.stringify(demo);
            }
        </script>
    </body>

</html>

效果圖:

如何將元素添加到JSON對象?

示例2:使用方括號表示法將{"prop_4" : "val_4"}添加到JSON對象中

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
    </head>

    <body>
        <h2 style="color:green;">如何將元素添加到JSON對象?</h2>

        <p id="up" style=" font-weight: bold"></p>

        <button onclick="fun()">單擊以添加</button>

        <p id="down" style="color:green; font-weight: bold" ;></p>

        <script>
            var demo = { 
                prop_1: "val_1", 
                prop_2: "val_2", 
                prop_3: "val_3" 
            }; 
            var p_up =  
                document.getElementById("up"); 
            var p_down =  
                document.getElementById("down"); 
            p_up.innerHTML =  JSON.stringify(demo); 

            function fun() { 
                demo["prop_4"] = "val_4"; 
                p_down.innerHTML = JSON.stringify(demo); 
            } 
        </script>
    </body>

</html>

效果圖:

如何將元素添加到JSON對象?
相關推薦:

angularjs教程

golang教程

redis入門教程

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章