JSFiddle - React, Tailwind, and code Playground

by Ramya Ranganathan

HTML

<h3>This is a practice set for manipulating nodes.</h3>
<p>This is a simple exercise to create a new element,a text node,appending a node and inserting a new node.</p>
<p>When 'Change Text' Button is Clicked the Ouput of this practice set will be Hello World.</p>

<p id="domtree">Hi There</p>

<div id="Change Text" class="button">Change Text</div>

CSS

h3 {
   color: #000000;
   text-decoration: underline;
}
p.lowercase {
    text-transform: lowercase;
    text-indent: 50px;
}
h4 {
   color: #000000;
}
.button {
    border: 1px solid #888888;
    color: #ffffff;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    font-style: normal;
    height: 20px;
    width: 140px;
    line-height: 20px;
    padding: .5em;
    text-align: center;
    background-color: #614C26;
}
.button:hover {
    border: 2px solid #000;
}

JavaScript

//Here we are creating a new element "p"

var button = document.getElementById("Change Text");
button.onclick = function () {

 var newEl = document.createElement("p");
 
//use document.createTextNode(text) to create a new text node and also an ElementNode.appendChild(elementToAppend) to append the created element into an existing element.
  
 newEl.appendChild(document.createTextNode("Hello, World"));
 document.body.appendChild(newEl);
  

//Inserting a new node using insertBefore() method which inserts a node as a child, right before an existing child
  var domtreeEl = document.getElementById("domtree");
  
document.body.insertBefore(newEl, domtreeEl);


// we are removing a child node from a parent node using removeChild()
  
 /* var el = document.getElementById("domtree");
    console.log(typeof el);
   
 document.body.removeChild(el);*/
}