---
title: "How to Add new elements dynamically?"  
description: "How to Add new elements dynamically?"  
author: "Amit Singh"  
published: 2011-03-18  
updated: 2020-09-18  
canonical: https://www.mindstick.com/interview/527/how-to-add-new-elements-dynamically  
category: "javascript"  
tags: ["javascript"]  
reading_time: 1 minute  

---

# How to Add new elements dynamically?

Example:\
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\
<head>\
<title>Title of page</title>\
<script type="text/javascript">\
function addNode() {\
var newP = document.createElement("p");\
var textNode = document.createTextNode(" I'm a new text node");\
newP.appendChild(textNode);\
document.getElementById("firstP").appendChild(newP);\
}\
</script>\
</head>\
<body onload="addNode();" style=" background: url('../images/Sand-1280.jpg'); background-color: yellow;">\
<p id="firstP">firstP<p>\
</body>\
</html>

## Answers

### Answer by Amit Singh

Example:\
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\
<head>\
<title>Title of page</title>\
<script type="text/javascript">\
function addNode() {\
var newP = document.createElement("p");\
var textNode = document.createTextNode(" I'm a new text node");\
newP.appendChild(textNode);\
document.getElementById("firstP").appendChild(newP);\
}\
</script>\
</head>\
<body onload="addNode();" style=" background: url('../images/Sand-1280.jpg'); background-color: yellow;">\
<p id="firstP">firstP<p>\
</body>\
</html>


---

Original Source: https://www.mindstick.com/interview/527/how-to-add-new-elements-dynamically

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
