How to add json value to P tag in Javascript

Question

Onclick on some tab I create a para tag and on this I want to add text. How to add these values ​​dynamically.

Here is what I am trying.

Onclick tabs I call this method.

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

My JSON data

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

Answer 1

You can define the second parameter in the getData function, pass para as the second parameter, set .textContent of para as a result of JSON.stringify() with jsonc passed as parameter or jsonc[0].VALUE , pass para to .appendChild() , to add an element to 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; } 

Answer 2

Once you have your element, you can use innerHTML to put it in it. Suppose you have already parsed your json and the required data is inside the jsonc variable that you can do

 para.innerHTML = jsonc[0].VALUE; 

Answer 3

To add dynamic html to a dynamically created element ( p tag) try this

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

Answer 4

You can follow these steps to add the json value to your para element here:

• Create the p element
• add innerHTML for the element
• Add item to tab

If you add innerHTML later, add it first and then add 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

You can use setAttribute () to add values, I tried, and you can save json data as a string, but I do not prefer to save it as a string directly, so you can add Base64 as the encoding.

 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); 

Cross64 Browser method (compressed) you can find the Base64 algorithm.