Append new elemnts from ajax jsfiddle
Here is an example of how you can append new elements to a page using AJAX and JavaScript in a JSFiddle:
HTML:
<div id="container"></div>
JavaScript:
$.ajax({
type: "GET",
url: "data.json", // replace with your data source
dataType: "json",
success: function(data) {
$.each(data, function(index, item) {
var newElement = $("<div>").text(item.name + " - " + item.description);
$("#container").append(newElement);
});
}
});
JSON data (data.json):
[
{"name": "Element 1", "description": "This is element 1"},
{"name": "Element 2", "description": "This is element 2"},
{"name": "Element 3", "description": "This is element 3"}
]
In this example, we're using the jQuery ajax
method to make a GET request to a JSON file (data.json
). The success
callback function is called when the request is successful, and it loops through the JSON data using $.each
. For each item in the data, we create a new <div>
element using jQuery's $()
function, set its text content using the text()
method, and then append it to the #container
element using the append()
method.
You can modify the JavaScript code to append elements to a specific container element, or to create a new element with a specific structure. You can also use other jQuery methods, such as append()
or appendTo()
, to append elements to the page.
Here is the complete JSFiddle: https://jsfiddle.net/your-javascript-code-here/
Note: Replace your-javascript-code-here
with the actual JavaScript code you want to use.