Append or add JSON data to DIV using JavaScript

The example here shows how to dynamically append or add JSON data to a DIV element using JavaScript. This guide covers parsing JSON, manipulating the DOM, and rendering structured data with practical examples.

Below, is a sample JSON data.
Note: You can edit the JSON or paste a new JSON data.

[
    { "Code": "001", "Bird_Name": "Canyon Towhee" }, 
    { "Code": "002", "Bird_Name": "Gila Woodpecker" }, 
    { "Code": "003", "Bird_Name": "White-tailed Hawk" },
    { "Code": "004", "Bird_Name": "Bald Eagle" },
    { "Code": "005", "Bird_Name": "Rock Pigeon" }
]

Click the button to add the above JSON to the <div> element.

See the code with complete tutorial.
More interesting and interactive Demos

👇 You may also like:
How to convert JSON into an HTML table using plain JavaScript 💡 No libraries, no fuss - just clean, vanilla JS to bring your data to life inside the DOM.