beforeEnd

Beforeend is a positional keyword used in the Web DOM insertion APIs to specify where to insert new content inside an element. It appears as one of several options in the insertAdjacent APIs and related methods.

It is one of four position values that can be supplied to methods such as Element.insertAdjacentHTML, Element.insertAdjacentText, and Element.insertAdjacentElement. The position 'beforeend' means that the new content will be inserted inside the target element, after all of its existing children. If the element has no children, the inserted content becomes the first and only child.

Understanding its relation to other positions helps with placement: 'beforebegin' inserts content immediately before the element itself, 'afterbegin' inserts inside the element before its first child, 'beforeend' inserts inside the element after its last child, and 'afterend' inserts content immediately after the element. Together, these options allow precise control over where new nodes or HTML are added relative to the target element.

In typical use, calling insertAdjacentHTML('beforeend', '<span>New</span>') will append the specified HTML as the last child of the element. The same position applies when using insertAdjacentText or insertAdjacentElement, adjusting the inserted content or node accordingly. The inserted HTML is parsed as HTML, so content and structure are created accordingly; if the string contains scripts or untrusted content, its handling and security implications vary by browser.

Compatibility is broad across modern browsers, including Chrome, Firefox, Safari, and Edge, with support dating to earlier versions of the DOM APIs.