如何将元素添加到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入门教程

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