<!--
Title: How to create element dynamically in Javascript?
Tutorial: https://tutorial.tips/how-to-create-elements-dynamically-in-javascript
Author: Gulshan Saini 
Twitter: https://twitter.com/gulshansainis
-->

<div id="parent">
  <h1>Today's menu</h1>
  <ul>
    <li>🍕Pizza </li>
    <li>🍩 Doughnut</li>
    <li>🍔 Hamburger</li>
  </ul>
</div>
/*
Title: How to create element dynamically in Javascript?
Tutorial: https://tutorial.tips/how-to-create-elements-dynamically-in-javascript
Author: Gulshan Saini 
Twitter: https://twitter.com/gulshansainis
*/
/**
Title: How to create element dynamically in Javascript?
Tutorial: https://tutorial.tips/how-to-create-elements-dynamically-in-javascript
Author: Gulshan Saini 
Twitter: https://twitter.com/gulshansainis
*/

// create paragraph element
let pElement = document.createElement('p');

// create text node
let pElementText = document.createTextNode("50% off on above items!!"); 

// append text node to paragraph
pElement.appendChild(pElementText);

// get handle of parent element where we need to insert dynamic element
let parent = document.querySelector('#parent');

// append the dynamic paragrah element
parent.appendChild(pElement);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.