How to append data to DOM element in javascript?|Jquery
- Admin
- Mar 10, 2024
- Javascript
This short tutorial shows How to append content to a div using plain JavaScript and jQuery.
let’s define a div element in HTML
<div id="employee"></div>
Here, we want to append the data, not the HTML tags data.
Use plain javascript to append data to the div element
Native JavaScript provides the following API methods to read and update DOM elements. DOM is a Tree of nodes, that represents HTML page content.
- getElementIById - Get DOM element for a given
id="value"
- createTextNode - Create a text node
- createElement - Create Element
First Way,
document.createElement()
is used to Create a DOM Element. Call the textContent
property on the newly created element. get Element using getElementById. Finally, append a new element to the element using appendChild
var employeeDiv = document.getElementById("employee");
var divElement = document.createElement("div");
divElement.textContent = "header content";
employeeDiv.appendChild(divElement);
Second Way, using createTextNode
get Element with an id selector using the getElementById
method. Next, create an object using createTextNode
with data. append an object to the div element using the appendChild
method
var employeeDiv = document.getElementById("employee");
var content = document.createTextNode("testcontent");
employeeDiv.appendChild(content);
Similarly, you can use the innerHTML
property which adds HTML and text data. This adds a security breach to the XSS attack. Moreover, It recreates div and all the references and listeners for existing div elements and does not work as expected.
var employeeDiv = document.getElementById("employee");
employeeDiv.innerHTML += "test content";
Third, using textContent
to a DOM Element
textContent
method appends text data only.
var employeeDiv = document.getElementById("employee");
employeeDiv.textContent += "test content" ;
Both generate the following HTML output
<div id="employee">test content</div>
Use jQuery to append content to the div
If you use jQuery
in your application, We can do it in multiple ways.
use ID selector syntax to select a div and use the append()
method
$("#employee").append("test content");
Another way, use the HTML()
method.
$("#employee").html("test content");