Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Append Data to Div Element Using JavaScript
We can append data to an <div> element using JavaScript by using the .innerHTML property to add content to the element. This can be done by using the += operator to add the new content to the existing content within the <div>. We can also use the .appendChild() method to add a new child element to the <div>.
<div>
<div> is a block-level element that is used to create a division or section in an HTML document. The element is usually used to group elements together, such as paragraphs, headings, or images. The <div> element can also be used to style a section of the document, such as adding a background color or border.
Approach
To append data to a div element using JavaScript, you would first need to select the element using a selector, then use the append() or appendChild() method to append data to the selected element.
Here is an example of how you would append a paragraph element to a div element ?
var div = document.querySelector('div');
var p = document.createElement('p');
p.textContent = 'This is some data that will be appended to the div element';
div.appendChild(p);
Example
Assuming you have a div with an id of "content" ?
<!DOCTYPE html> <html> <head> <title>Append Data to DIV</title> </head> <body> <div id='content'> <p style='color:black;'>I existed before</p> </div> <script> var div = document.getElementById('content'); var p = document.createElement('p'); p.style.color = 'black'; p.textContent = 'I was appended to the div'; div.appendChild(p); </script> </body> </html>
22K+ Views
