How to change div content onclick

Hi, this is one way of doing it --- >

for example i have a div with the id of one

<div id="one">1</div>

and i want to replace this div with another div when this div is clicked . and im going to give that other div an id of two just for now.then im going to give these divs (one of em still doesn't exist though) some sample styles just to see what happens.

#one{
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
#two{
  width: 100px;
  height: 100px;
  border: 1px solid blue;
}

and then here's the good js part -->

// get the element
var div1 = document.getElementById('one');

// set an event listener for it
div1.addEventListener('click',function(){
//   create a new div
  var div2 =  document.createElement('div');
//   giv that div an id of two
  div2.setAttribute("id", "two");
//   append the new div to the dom
  this.parentNode.appendChild(div2);
//   remove the clicked div
  this.parentNode.removeChild(this);
});

as you can see, first i select the div i want to interact with ( give onclick event to ) . then im going to give it the event listener , and when it clicks tell it to : 1st - create a new div element. 2nd - give that new element an id of two , so when it appears i can see it did 3rd - appending that new div to the parent ( which is the body element here in my example but can be any element depending on the html markup, and 4th - removing the clicked div so it looks like it replaced completely with a new div .

happy coding ;)