How can I create and style a div using JavaScript

Question

How can I use JavaScript to create and style  and append to the page  a div  with content  I know it s possible  but how

User · Answer

this solution uses the jquery library      elementId   append   lt div class  classname  gt content lt  div gt

User · Answer

While other answers here work  I notice you asked for a div with content  So here s my version with extra content  JSFiddle link at the bottom   JavaScript  with comments       Creating a div element var divElement   document createElement  Div    divElement id    divID       Styling it divElement style textAlign    center   divElement style fontWeight    bold   divElement style fontSize    smaller   divElement style paddingTop    15px       Adding a paragraph to it var paragraph   document createElement  P    var text   document createTextNode  Another paragraph  yay  This one will be styled different from the rest since we styled the DIV we specifically created     paragraph appendChild text   divElement appendChild paragraph       Adding a button  cause why not  var button   document createElement  Button    var textForButton   document createTextNode  Release the alert    button appendChild textForButton   button addEventListener  click   function        alert  Hi         divElement appendChild button       Appending the div element to body document getElementsByTagName  body   0  appendChild divElement     HTML    lt body gt     lt h1 gt Title lt  h1 gt     lt p gt This is a paragraph  Well  kind of  lt  p gt   lt  body gt    CSS   h1   color   333333  font-family   Bitter   serif  font-size  50px  font-weight  normal  line-height  54px  margin  0 0 54px     p   color   333333  font-family  Georgia  serif  font-size  18px  line-height  28px  margin  0 0 28px      Note  CSS lines borrowed from Ratal Tomal  JSFiddle  https   jsfiddle net Rani Kheir erL7aowz

User · Answer

This will be inside a function or script tag with custom CSS with classname as Custom  var board   document createElement  div     board className    quot Custom quot    board innerHTML    quot your data quot    console log count    document getElementById  notification   appendChild board

User · Answer

x000D   x000D  var div   document createElement  div    x000D  div style width    100px   x000D  div style height    100px   x000D  div style background    red   x000D  div style color    white   x000D  div innerHTML    Hello   x000D   x000D  document getElementById  main   appendChild div   x000D   lt body gt  x000D   lt div id  main  gt  lt  div gt  x000D   lt  body gt  x000D   x000D   x000D    var div   document createElement  div    div style width    100px   div style height    100px   div style background    red   div style color    white   div innerHTML    Hello    document getElementById  main   appendChild div   OR document body appendChild div     Use parent reference instead of document body

User · Answer

Depends on how you re doing it  Pure javascript   var div   document createElement  div    div innerHTML    my  lt b gt new lt  b gt  skill -  lt large gt DOM maniuplation  lt  large gt       set style div style color    red      better to use CSS though - just set class div setAttribute  class    myclass       and make sure myclass has some styles in css document body appendChild div     Doing the same using jquery is embarrassingly easy      body    append  my DOM manupulation skills dont seem like a big deal when using jquery    css  color    red   addClass  myclass      Cheers

User · Answer

Another thing I like to do is creating an object and then looping thru the object and setting the styles like that because it can be tedious writing every single style one by one   var bookStyles        color   red      backgroundColor   blue      height   300px      width   200px      let div   document createElement  div     for  let style in bookStyles     div style style    bookStyles style      body appendChild div

User · Answer

You can create like this  board style cssText    position fixed height 100px width 100px background  ddd    document getElementById  main   appendChild board     Complete Runnable Snippet   x000D   x000D  var board  x000D  board  document createElement  div    x000D  board id    mainBoard   x000D  board style cssText    position fixed height 100px width 100px background  ddd   x000D       x000D  document getElementById  main   appendChild board   x000D   lt body gt  x000D   lt div id  main  gt  lt  div gt  x000D   lt  body gt  x000D   x000D   x000D

User · Answer

Here s one solution that I d use   var div     lt div id  yourId  class  yourClass  yourAttribute  yourAttributeValue  gt blah lt  div gt      If you wanted the attribute and or attribute values to be based on variables   var id    hello   var classAttr    class   var div     lt div id   id     classAttr    world   gt Blah lt  div gt      Then  to append to the body   document getElementsByTagName  body   innerHTML   div    Easy as pie

User · Answer

You can just use the method below  document write    It is very simple  in the doc below I explain  x000D   x000D  document write   lt div class  div  gt Some content inside the div  It is styled   lt  div gt    x000D   div     background-color  red    padding  5px    color   fff    font-family  Arial    cursor  pointer      div hover     background-color  blue    padding  10px      div hover before     content   Hover         div active     background-color  green    padding  15px      div active after     content    Active  or clicked        x000D   lt p gt Below or above well show the div lt  p gt   lt p gt Try pointing hover it and clicking on it  Those are tha styles aplayed  The text and background color changes  lt  p gt  x000D   x000D   x000D

User · Answer

create div with id name  var divCreator function  id   newElement document createElement  div    newNode document body appendChild newElement   newNode setAttribute  id  id       add text to div  var textAdder   function id  text    target   document getElementById id  target appendChild document createTextNode text        test code  divCreator  div1    textAdder  div1    this is paragraph 1      output  this is paragraph 1

[javascript] How can I create and style a div using JavaScript?

Examples related to javascript