Javascript DOM Element insert before element

Description

Javascript DOM Element insert before element

View in separate window 

<!DOCTYPE html">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Inserting an object</title>
<style type="text/css">
div{// ww  w  . j  a  v a 2 s.c o m
  width: 50%;
  height: 20px;
  padding: 10px;
  margin: 10px 0;
}

#div1{
  background-color: #ffff00;
}

.divclass{
  background-color: #ccffcc;
}

</style>
<script type="text/javascript">

window.onload=function() {
  document.getElementById("div1").onclick=addDiv;
}

function addDiv() {
  // get parent
  let parent = this.parentNode;
  // create new div
  let newDiv = document.createElement("div");
  newDiv.className = "divclass";
  newDiv.innerHTML = "<p>I'm here, I'm in the page</p>";

  // add to page
  parent.insertBefore(newDiv,this);
}
</script>
</head>
<body>
  <div id="div1">
     <p>Click me to add new element</p>
  </div>
</body>
</html>



PreviousNext

Related