如何在Javascript中将JSON值添加到P标签中

Question

点击某个选项卡后，我创建一个段落标签，并想在其中添加一些文本。如何动态地添加这些值？

以下是我的尝试：

当点击选项卡时，我会调用此方法。

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."

    }]

- David

---

问题在于代码中动态创建的元素没有被附加到HTML文档中。 - guest271314

Answer 1

您可以在getData函数中定义第二个参数，将para作为第二个参数传递，将para的.textContent设置为JSON.stringify()函数的结果，该函数的参数为jsonc或jsonc[0].VALUE。然后使用.appendChild()将para传递给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;
}

- guest271314

Answer 2

当你有了元素，你可以使用 innerHTML 将内容放入其中。假设你已经解析了 JSON 数据并且你想要的数据在变量 jsonc 中，你可以这样做：

para.innerHTML = jsonc[0].VALUE;

- Federico klez Culloca

---

在 getData 函数中，我得到了 inner html of null 的错误。似乎 para 没有被定义。我更新了我的问题，请看一下。 - David

你还需要使用 appendChild 方法将 para 添加到包含它的元素中，以便 getElementById 可以找到它。否则，它将无法被找到。 - Federico klez Culloca

动态地工作吗？我的意思是，在添加参数后，我们可以使用 getElementById() 来查找该元素吗？ - bhansa

Answer 3

如果要为动态创建的元素（例如 p 标签）添加动态 html，请尝试以下方法：

//Jquery
$("#yourtabid").append("<p></p>")
$("#yourtabid").find('p').append(jsonc[0].value);

- Znaneswar

Answer 4

你可以按照以下步骤将json值添加到你的段落元素中：

• 创建一个“p”元素
• 为该元素添加innerHTML
• 将该元素添加到你的选项卡中

如果你稍后添加innerHTML，请先附加子元素，然后再添加innerHTML。

var para = document.createElement("p");
para.innerHTML = "TEST";

// I'm guessing you have some Element with id "tab"
document.getElementById("tab").appendChild(para);

<div id="tab"></div>

- bhansa

Answer 5

您可以使用setAttribute()添加值，我已经尝试过，将JSON数据保存为字符串是可行的，但我不喜欢直接保存为字符串，因此您可以添加为Base64编码。

var Base64={_keyStr:"ABCDEFGHIJKL....................
var jsonData = [{
    "ID" : 0,
    "VALUE" : "My 10000 Character text."

}];
console.log(jsonData);

jsonDataStr = JSON.stringify(jsonData);
console.log(jsonDataStr);


var para = document.createElement("P");
document.body.appendChild(para);
para.setAttribute('data-custom',Base64.encode(jsonDataStr));
//para.setAttribute('data-custom',jsonDataStr);

var dataFromAtt = para.getAttribute('data-custom');
console.log(dataFromAtt);

Base64跨浏览器方法（压缩），您可以找到Base64算法。

- Ferhat BAŞ

---

base64与问题有什么关系？ - guest271314

我不喜欢直接保存为字符串，也可以不使用Base64。 - Ferhat BAŞ