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. defaultView
    18. designMode
    19. dir
    20. doctype
    21. documentElement
    22. documentURI
    23. domain Deprecated
    24. embeds
    25. featurePolicy Experimental
    26. fgColor Deprecated
    27. firstElementChild
    28. fonts
    29. forms
    30. fragmentDirective
    31. fullscreen Deprecated
    32. fullscreenElement
    33. fullscreenEnabled
    34. head
    35. hidden
    36. images
    37. implementation
    38. lastElementChild
    39. lastModified
    40. lastStyleSheetSet Non-standard Deprecated
    41. linkColor Deprecated
    42. links
    43. location
    44. pictureInPictureElement
    45. pictureInPictureEnabled
    46. plugins
    47. pointerLockElement
    48. preferredStyleSheetSet Non-standard Deprecated
    49. prerendering Experimental
    50. readyState
    51. referrer
    52. rootElement Deprecated
    53. scripts
    54. scrollingElement
    55. selectedStyleSheetSet Non-standard Deprecated
    56. styleSheets
    57. styleSheetSets Non-standard Deprecated
    58. timeline
    59. title
    60. URL
    61. visibilityState
    62. vlinkColor Deprecated
    63. xmlEncoding Deprecated
    64. 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