如何在Javascript中添加P标签中的json值

Question

点击一些标签,我正在创建para标签,我想添加一些文字.如何动态添加这些值.

这是我正在尝试的.

选项卡的onclick我正在调用此方法.

SomeMethod = function(){
    var para = document.createElement("P");
       para.setAttribute("id", "myUL");


    function getData(callback) {
        debugger;
        var httpRequest = new XMLHttpRequest();
        httpRequest.open('GET', "../resource/para.json", true);
        httpRequest.onreadystatechange = function() {
            if (httpRequest.readyState === XMLHttpRequest.DONE && httpRequest.status === 200) {
                callback(httpRequest.responseText);
            }
        };
        httpRequest.send();
    }

    getData(function(data) {
        var jsonc = JSON.parse(data);
        debugger;
   document.getElementById('myUL').innerHTML = jsonc[0].VALUE;
    });
}

我的JSON数据是

[{
    "ID" : 0,
    "VALUE" : "My 10000 Character text."

    }]

Answer 1

您可以在函数中定义第二个参数getData，para作为第二个参数传递，设置.textContent为作为参数传递的结果，或者传递para到将元素附加到JSON.stringify()jsoncjsonc[0].VALUEpara.appendChild()document

JavaScript

para.className = "json";

// pass `para` to `getData()` call
callback(httpRequest.responseText, para);

// `element`: `para` passed at `callback`
getData(function(data, element) {
    var jsonc = JSON.parse(data);
    element.textContent = JSON.stringify(jsonc, null, 4); // or `jsonc[0].VALUE`
    document.body.appendChild(element);
    debugger;
});

CSS

p.json {
  white-space: pre;
}