Adding div element to body or document in JavaScript

Question

I am creating a light box in pure JavaScript  For that I am making an overlay  I want to add this overlay to body but I also want to keep the content on the page  My current code adds the overlay div but it also removes the current contents in body  How to add div element and keep contents on body   var el   document getElementById  element    var body   document getElementsByTagName  body    el innerHTML     lt p gt  lt a id  clickme  href     gt Click me lt  a gt  lt  p gt    document getElementById  clickme   onclick   function  e        e preventDefault        document body innerHTML     lt div style  position absolute width 100  height 100  opacity 0 3 z-index 100 background  000   gt  lt  div gt

User · Answer

The best and better way is to create an element and append it to the body tag  Second way is to first get the innerHTML property of body and add code with it  For example   var b   document getElementsByTagName  body    b innerHTML   b innerHTML    Your code

User · Answer

Instead of replacing everything with innerHTML try   document body appendChild myExtraNode

User · Answer

The modern way is to use ParentNode append    like so    x000D   x000D  let element   document createElement  div    x000D  element style cssText    position absolute width 100  height 100  opacity 0 3 z-index 100 background  000    x000D  document body append element   x000D   x000D   x000D

User · Answer

You can make your div HTML code and set it directly into body Or any element  with following code   var divStr     lt div class  text-warning  gt Some html lt  div gt    document getElementsByTagName  body   0  innerHTML    divStr

User · Answer

Try doing  document body innerHTML      lt div style  position absolute width 100  height 100  opacity 0 3 z-index 100 background  000   gt  lt  div gt

User · Answer

Here s a really quick trick  Let s say you wanna add p tag inside div tag    lt div gt   lt p gt  lt script gt document write  lt variablename gt   lt  script gt  lt  p gt   lt  div gt    And that s it

User · Answer

The most underrated method is insertAdjacentElement  You can literally add your HTML using one single line  document body insertAdjacentElement  beforeend   html   Read about it here - https   developer mozilla org en-US docs Web API Element insertAdjacentElement

User · Answer

improving the post of  Peter T  by gathering all solutions together at one place   Element insertAdjacentHTML    function myFunction         window document body insertAdjacentHTML   afterbegin     lt div id  myID  style  color blue   gt  With some data    lt  div gt        function addElement        var elemDiv   document createElement  div        elemDiv style cssText    width 100  height 10  background rgb 192 192 192         elemDiv innerHTML    Added element with some data        window document body insertBefore elemDiv  window document body firstChild          document body appendChild elemDiv      appends last of that element   function addCSS         window document getElementsByTagName  style   0  innerHTML      mycss  text-align center        Using XPath find the position of the Element in the DOM Tree and insert the specified text at a specified position to an XPath Element  try this code over browser console    function insertHTML ByXPath  xpath  position  newElement        var element   document evaluate xpath  window document  null  9  null   singleNodeValue      element insertAdjacentHTML position  newElement       element style  border 3px solid orange      var xpath DOMElement         id  answer-33669996   table tbody tr 1  td 2  div   var childHTML     lt div id  Yash  gt Hi My name is  lt B gt   YASHWANTH   lt  B gt  lt  div gt    var position    beforeend   insertHTML ByXPath xpath DOMElement  position  childHTML

User · Answer

Try this out -  http   jsfiddle net adiioo7 vmfbA   Use   document body innerHTML      lt div style  position absolute width 100  height 100  opacity 0 3 z-index 100 background  000   gt  lt  div gt      instead of   document body innerHTML     lt div style  position absolute width 100  height 100  opacity 0 3 z-index 100 background  000   gt  lt  div gt      Edit - Ideally you should use body appendChild method instead of changing the innerHTML  var elem   document createElement  div    elem style cssText    position absolute width 100  height 100  opacity 0 3 z-index 100 background  000   document body appendChild elem

User · Answer

Using Javascript  var elemDiv   document createElement  div    elemDiv style cssText    position absolute width 100  height 100  opacity 0 3 z-index 100 background  000    document body appendChild elemDiv     Using jQuery     body   append   lt div style  position absolute width 100  height 100  opacity 0 3 z-index 100 background  000   gt  lt  div gt

[javascript] Adding div element to body or document in JavaScript

Examples related to javascript