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的{{1}}设置为para的结果JSON.stringify() 1}}作为参数或jsonc传递，将jsonc[0].VALUE传递给para以将元素追加到.appendChild()

的JavaScript

document

para.className = "json";

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

CSS

// `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;
});

Answer 2

获得元素后，可以使用innerHTML将内容放入其中。假设你已经解析了你的json，你想要的数据就在你可以做的jsonc变量中

para.innerHTML = jsonc[0].VALUE;

Answer 3

要将动态html添加到动态创建的元素（即p标记），请尝试使用

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

Answer 4

您可以按照以下步骤将json值添加到para元素：

创建“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>

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 Cross-Browser Method (compressed)你可以找到Base64算法。

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

5 个答案: