Creating a div element in jQuery

Question

How do I create a div element in jQuery

User · Answer

alternatively to append   you can also use appendTo   which has a different syntax        foo   append   lt div gt hello world lt  div gt         lt div gt hello world lt  div gt    appendTo   foo

User · Answer

Create an in-memory DIV      lt div  gt       Add click handlers  styles etc - and finally insert into DOM into a target element selector    x000D   x000D      lt div  gt      x000D   x000D       PROPERTIES HERE x000D     x000D    text   Click me   x000D    id   example   x000D     class    myDiv             class  is still better in quotes  x000D    css               x000D      color   red   x000D      fontSize   3em   x000D      cursor   pointer  x000D       x000D    on    x000D      mouseenter  function     x000D        console log  PLEASE         this  text     x000D         x000D      click  function     x000D        console log  Hy  My ID is     this id   x000D        x000D       x000D    append    lt i gt    lt  i gt    x000D    appendTo   body          Finally  append to any selector x000D     x000D          lt  lt  no need to do anything here as we defined the properties internally  x000D   lt script src    ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   x000D   x000D    Similar to ian s answer  but I found no example that properly addresses the use of methods within the properties object declaration so there you go

User · Answer

If you are using Jquery   1 4  you are best of with  Ian s answer  Otherwise  I would use this method   This is very similar to celoron s answer  but  I don t know why they used document createElement instead of Jquery notation       body   append function            return     lt div  gt    html  I m a freshly created div  I also contain some Ps                 attr  id   myDivId                addClass  myDivClass                css  border    solid                                 append     lt p  gt    html  I think  therefore I am                  append     lt p  gt    html  The die is cast            Some style  for better demonstration if you want to try it out  Don t use this approach for actual design and layout     body   append     lt style  gt    html  p background-color blue  div background-color yellow  div gt p color white         I also think using append   with a callback function is in this case more readable  because you now immediately that something is going to be appended to the body  But that is a matter of taste  as always when writing any code or text   In general  use as less HTML as possible in JQuery code  since this is mostly spaghetti code  It is error prone and hard to maintain  because the HTML-String can easily contain typos  Also  it mixes a markup language  HTML  with a programming language  Javascript Jquery   which is usually a bad Idea

User · Answer

lt div  gt    appendTo  div main      will append a blank div to  lt div id  main  gt  lt  div gt

User · Answer

I ve just made a small jQuery plugin for that   It follows your syntax   var myDiv     create  div      DOM node ID can be specified as second parameter   var secondItem     create  div   item2      Is it serious  No  But this syntax is better than     lt div gt  lt  div gt     and it s a very good value for that money    Answer partially copied from  jQuery document createElement equivalent

User · Answer

You can create separate tags using the  jquery   method  And create child tags by using the  append   method  As jQuery supports chaining  you can also apply CSS in two ways   Either specify it in the class or just call  attr     var lTag   jQuery   lt li  gt     appendTo   div class   html data productDisplayName    var aHref   jQuery   lt a  gt                 appendTo lTag  attr  href   data mediumImageURL    jQuery   lt img  gt                                                       appendTo aHref  attr  src   data mediumImageURL  attr  alt   data altText     Firstly I am appending a list tag to my div tag and inserting JSON data into it  Next  I am creating a child tag of list  provided some attribute  I have assigned the value to a variable  so that it would be easy for me to append it

User · Answer

I think this is the best way to add a div   To append a test div to the div element with ID div id       div id   append  div name along with id will come here  for example  test      Now append HTML to this added test div       test   append  Your HTML

User · Answer

You can use append  to add at last position of parent  or prepend  to add at fist position of parent        parent   append   lt div gt hello lt  div gt            or     lt div gt hello lt  div gt    appendTo   parent      Alternatively  you can use the  html   or  add   as mentioned in a different answer

User · Answer

lt div  gt    attr  id   new   appendTo  body          This will create new div with id  new  into body

User · Answer

lt div id  foo  gt  lt  div gt       foo   html   lt div gt  lt  div gt

User · Answer

Here s another technique for creating divs with jQuery   ELEMENT CLONING  Say you have an existing div in your page that you want to clone using jQuery  e g  to duplicate an input a number of times in a form    You would do so as follows    x000D   x000D      clone button   click function     x000D        clone wrapper div first   x000D     clone   x000D     append  clone   x000D     appendTo     clone wrapper     x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div id  clone wrapper  gt  x000D     lt div gt  x000D      Div x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   lt button id  clone button  gt Clone me  lt  button gt  x000D   x000D   x000D

User · Answer

div       lt div gt    html  Loading             body   prepend div

User · Answer

simply if you want to create any HTML tag you can try this for example   var selectBody      body    var div       lt div gt     var h1        lt h1 gt     var p         lt p gt       if you want to add any element on the flay you can try this  selectBody append div

User · Answer

I hope that helps code      I use   function generateParameterForm fieldName  promptText  valueType           lt div class  form-group  gt         lt label for  yyy  class  control-label  gt XXX lt  label gt         lt input type  text  class  form-control  id  yyy  name  yyy   gt         lt  div gt          Add new div tag     var form       lt div  gt    addClass  form-group            Add label for prompt text     var label       lt label  gt    attr  for   fieldName  addClass  control-label   text promptText           Add text field     var input       lt input  gt    attr  type    text   addClass  form-control   addClass valueType  attr  id   fieldName  attr  name   fieldName           lbl and inp   gt  form       form  append label  append input        return   form

User · Answer

Technically     lt div gt  lt  div gt    will  create  a div element  or more specifically a DIV DOM element  but won t add it to your HTML document  You will then need to use that in combination with the other answers to actually do anything useful with it  such as using the append   method or such like    The manipulation documentation gives you all the various options on how to add new elements

User · Answer

A short way of creating div is  var customDiv       lt div  gt       Now the custom div  can be appended to any other div

User · Answer

All these worked for me   HTML part    lt div id  targetDIV  style  border  1px solid Red  gt      This text is surrounded by a DIV tag whose id is  targetDIV    lt  div gt    JavaScript code     Way 1  appendTo    lt script type  text javascript  gt          lt div gt hello stackoverflow users lt  div gt    appendTo   targetDIV      appendTo  Append at inside bottom  lt  script gt     Way 2  prependTo    lt script type  text javascript  gt          lt div gt Hello  Stack Overflow users lt  div gt    prependTo   targetDIV      prependTo  Append at inside top  lt  script gt     Way 3  html    lt script type  text javascript  gt          targetDIV   html   lt div gt Hello  Stack Overflow users lt  div gt        html    Clean HTML inside and append  lt  script gt     Way 4  append    lt script type  text javascript  gt          targetDIV   append   lt div gt Hello  Stack Overflow users lt  div gt       Same as appendTo  lt  script gt

User · Answer

You can use  add   to create a new jQuery object and add to the targeted element  Use chaining then to proceed further   For eg jQueryApi     x000D   x000D      div    css   border    2px solid red    x000D     add   p    x000D     css   background    yellow     x000D   div   x000D      width  60px  x000D      height  60px  x000D      margin  10px  x000D      float  left  x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div gt  lt  div gt  x000D   lt div gt  lt  div gt  x000D   lt div gt  lt  div gt  x000D   lt div gt  lt  div gt  x000D   lt div gt  lt  div gt  x000D   lt div gt  lt  div gt  x000D   x000D   x000D

User · Answer

d   document createElement  div      d  addClass classname       html text       appendTo     myDiv      main div  click function            this  remove            hide        slideToggle 300       delay 2500       slideToggle 300       queue function            this  remove

User · Answer

As of jQuery 1 4 you can pass attributes to a self-closed element like so   jQuery   lt div  gt          id   some-id        class    some-class       title   now this div has a title      appendTo   mySelector      Here it is in the Docs  Examples can be found at jQuery 1 4 Released  The 15 New Features you Must Know

User · Answer

document createElement  div

User · Answer

How about this  Here  pElement refers to the element you want this div inside  to be a child of          pElement   append   lt div gt  lt  div      You can easily add anything more to that div in the string - Attributes  Content  you name it  Do note  for attribute values  you need to use the right quotation marks

User · Answer

If it is just an empty div  this is sufficient       foo   append   lt div gt      or      foo   append   lt div  gt      It gives the same result

User · Answer

HTMLelement  can success it  If you want an epmty div use it as     lt div gt  lt  div gt      Also you can set the other elements by the same method  If you want to change inner HTML after created you can use html   method  For get outerHTML as string you can use is like this     var element       lt div  gt     var innerHTML   element html       if you want set new HTML use it like this element html   lt b gt new HTML lt  b gt     var outerHTML   element 0  outerHTML

[javascript] Creating a div element in jQuery

Examples related to javascript

Examples related to jquery

Examples related to html

Examples related to append

Examples related to jquery-append