eateElement() - Web APIs - MDN

Home » Add Div Javascript » eateElement() - Web APIs - MDN

Maybe your like

  • Skip to main content
  • Skip to search
Document: createElement() method Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

  • Learn more
  • See full compatibility
  • Report feedback

In an HTML document, the document.createElement() method creates the HTML element specified by localName, or an HTMLUnknownElement if localName isn't recognized.

In this article

  • Syntax
  • Examples
  • Specifications
  • Browser compatibility
  • See also

Syntax

jscreateElement(localName) createElement(localName, options)

Parameters

localName

A string that specifies the type of element to be created. Don't use qualified names (like "html:a") with this method. When called on an HTML document, createElement() converts localName to lower case before creating the element. In Firefox, Opera, and Chrome, createElement(null) works like createElement("null").

options Optional

An object with the following properties:

is

The tag name of a custom element previously defined via customElements.define(). See Web component example for more details.

Return value

The new Element.

Note: A new HTMLElement is returned if the document is an HTMLDocument, which is the most common case. Otherwise a new Element is returned.

Examples

Basic example

This creates a new <div> and inserts it before the element with the ID div1.

HTML

html<!doctype html> <html lang="en-US"> <head> <meta charset="UTF-8" /> <title>Working with elements</title> </head> <body> <div id="div1">The text above has been created dynamically.</div> </body> </html>

JavaScript

jsfunction addElement() { // create a new div element const newDiv = document.createElement("div"); // and give it some content const newContent = document.createTextNode("Hi there and greetings!"); // add the text node to the newly created div newDiv.appendChild(newContent); // add the newly created element and its content into the DOM const currentDiv = document.getElementById("div1"); document.body.insertBefore(newDiv, currentDiv); } addElement();

Result

Web component example

Note: Check the browser compatibility section for support, and the is attribute reference for caveats on implementation reality of customized built-in elements.

The following example snippet is taken from our expanding-list-web-component example (see it live also). In this case, our custom element extends the HTMLUListElement, which represents the <ul> element.

js// Create a class for the element class ExpandingList extends HTMLUListElement { constructor() { // Always call super first in constructor super(); // constructor definition left out for brevity // … } } // Define the new element customElements.define("expanding-list", ExpandingList, { extends: "ul" });

If we wanted to create an instance of this element programmatically, we'd use a call along the following lines:

jslet expandingList = document.createElement("ul", { is: "expanding-list" });

The new element will be given an is attribute whose value is the custom element's tag name.

Note: For backwards compatibility, some browsers will allow you to pass a string here instead of an object, where the string's value is the custom element's tag name.

Specifications

Specification
DOM# ref-for-dom-document-createelement①

Browser compatibility

See also

  • Node.removeChild()
  • Node.replaceChild()
  • Node.appendChild()
  • Node.insertBefore()
  • Node.hasChildNodes()
  • document.createElementNS() — to explicitly specify the namespace URI for the element.

Help improve MDN

Was this page helpful to you? Yes No Learn how to contribute

This page was last modified on Sep 11, 2025 by MDN contributors.

View this page on GitHub • Report a problem with this content Filter sidebar
  1. Document Object Model (DOM)
  2. Document
  3. Constructor
    1. Document()
  4. Instance properties
    1. activeElement
    2. activeViewTransition
    3. adoptedStyleSheets
    4. alinkColor Deprecated
    5. all Deprecated
    6. anchors Deprecated
    7. applets Deprecated
    8. bgColor Deprecated
    9. body
    10. characterSet
    11. childElementCount
    12. children
    13. compatMode
    14. contentType
    15. cookie
    16. currentScript
    17. customElementRegistry
    18. defaultView
    19. designMode
    20. dir
    21. doctype
    22. documentElement
    23. documentURI
    24. domain Deprecated
    25. embeds
    26. featurePolicy Experimental
    27. fgColor Deprecated
    28. firstElementChild
    29. fonts
    30. forms
    31. fragmentDirective
    32. fullscreen Deprecated
    33. fullscreenElement
    34. fullscreenEnabled
    35. head
    36. hidden
    37. images
    38. implementation
    39. lastElementChild
    40. lastModified
    41. lastStyleSheetSet Non-standard Deprecated
    42. linkColor Deprecated
    43. links
    44. location
    45. pictureInPictureElement
    46. pictureInPictureEnabled
    47. plugins
    48. pointerLockElement
    49. preferredStyleSheetSet Non-standard Deprecated
    50. prerendering Experimental
    51. readyState
    52. referrer
    53. rootElement Deprecated
    54. scripts
    55. scrollingElement
    56. selectedStyleSheetSet Non-standard Deprecated
    57. styleSheets
    58. styleSheetSets Non-standard Deprecated
    59. timeline
    60. title
    61. URL
    62. visibilityState
    63. vlinkColor Deprecated
    64. xmlEncoding Deprecated
    65. xmlVersion Deprecated
  5. Static methods
    1. parseHTML() Experimental
    2. parseHTMLUnsafe()
  6. Instance methods
    1. adoptNode()
    2. append()
    3. ariaNotify() Experimental Non-standard
    4. browsingTopics() Non-standard Deprecated
    5. caretPositionFromPoint()
    6. caretRangeFromPoint() Non-standard
    7. clear() Deprecated
    8. close()
    9. createAttribute()
    10. createAttributeNS()
    11. createCDATASection()
    12. createComment()
    13. createDocumentFragment()
    14. createElement()
    15. createElementNS()
    16. createEvent() Deprecated
    17. createExpression()
    18. createNodeIterator()
    19. createNSResolver() Deprecated
    20. createProcessingInstruction()
    21. createRange()
    22. createTextNode()
    23. createTouch() Non-standard Deprecated
    24. createTouchList() Non-standard Deprecated
    25. createTreeWalker()
    26. elementFromPoint()
    27. elementsFromPoint()
    28. enableStyleSheetsForSet() Non-standard Deprecated
    29. evaluate()
    30. execCommand() Deprecated
    31. exitFullscreen()
    32. exitPictureInPicture()
    33. exitPointerLock()
    34. getAnimations()
    35. getElementById()
    36. getElementsByClassName()
    37. getElementsByName()
    38. getElementsByTagName()
    39. getElementsByTagNameNS()
    40. getSelection()
    41. hasFocus()
    42. hasPrivateToken() Experimental
    43. hasRedemptionRecord() Experimental
    44. hasStorageAccess()
    45. hasUnpartitionedCookieAccess()
    46. importNode()
    47. moveBefore()
    48. mozSetImageElement() Non-standard
    49. open()
    50. prepend()
    51. queryCommandEnabled() Non-standard Deprecated
    52. queryCommandState() Non-standard Deprecated
    53. queryCommandSupported() Non-standard Deprecated
    54. querySelector()
    55. querySelectorAll()
    56. releaseCapture() Non-standard
    57. replaceChildren()
    58. requestStorageAccess()
    59. requestStorageAccessFor() Experimental
    60. startViewTransition()
    61. write() Deprecated
    62. writeln() Deprecated
  7. Events
    1. afterscriptexecute Non-standard Deprecated
    2. beforescriptexecute Non-standard Deprecated
    3. DOMContentLoaded
    4. fullscreenchange
    5. fullscreenerror
    6. pointerlockchange
    7. pointerlockerror
    8. prerenderingchange Experimental
    9. readystatechange
    10. scroll
    11. scrollend
    12. scrollsnapchange Experimental
    13. scrollsnapchanging Experimental
    14. securitypolicyviolation
    15. selectionchange
    16. visibilitychange
  8. Inheritance
    1. Node
    2. EventTarget
  9. Related pages for DOM
    1. AbortController
    2. AbortSignal
    3. AbstractRange
    4. Attr
    5. CDATASection
    6. CharacterData
    7. Comment
    8. CustomEvent
    9. DOMError Deprecated
    10. DOMException
    11. DOMImplementation
    12. DOMParser
    13. DOMTokenList
    14. DocumentFragment
    15. DocumentType
    16. Element
    17. Event
    18. EventTarget
    19. HTMLCollection
    20. MutationObserver
    21. MutationRecord
    22. NamedNodeMap
    23. Node
    24. NodeIterator
    25. NodeList
    26. ProcessingInstruction
    27. QuotaExceededError Experimental
    28. Range
    29. ShadowRoot
    30. StaticRange
    31. Text
    32. TreeWalker
    33. XMLDocument
    34. XPathEvaluator
    35. XPathExpression
    36. XPathResult
    37. XSLTProcessor
  10. Guides
    1. Anatomy of the DOM
    2. Attribute reflection
    3. Selection and traversal on the DOM tree
    4. Building and updating the DOM tree
    5. Working with events

Tag » Add Div Javascript