Manage HTML DOM with vanilla JavaScript

Star me on GitHub · 4932★

Basic

Insert an element after or before other element

Insert given HTML after or before an element

Loop over a nodelist

Prepend to an element

Press Shift and Enter for a new line

Prevent body from scrolling when opening a modal

Prevent the default action of an event

Prevent the page from scrolling to an element when it is focused

Put cursor at the end of an input

Redirect to another page

Reload the current page

Remove all children of a node

Remove an element

Replace an element

Replace broken images

Resize an iframe to fit its content

Scroll to an element

Scroll to top of the page

Select an element or list of elements

Select the children of an element

Select the text content of an element

Select the text of a textarea automatically

Serialize form data into a query string

Set CSS style for an element

Show or hide an element

Strip HTML from a given text

Submit a form with Ajax

Toggle an element

Toggle password visibility

Unwrap an element

Trigger an event

Upload files with Ajax

Wrap an element around a given element

Add or remove class from an element

Append to an element

Attach or detach an event handler

Calculate the mouse position relative to an element

Check an element against a selector

Check if an element is a descendant of another

Check if an element is in the viewport

Check if an element has given class

Check if the code is running in the browser

Check if the native date input is supported

Check if the touch events are supported

Clone an element

Count the number of characters of a textarea

Create an element

Create one time event handler

Detect clicks outside of an element

Detect if an element is focused

Detect internet explorer browser

Detect mac OS browser

Detect mobile browsers

Detect the dark mode

Determine the height and width of an element

Distinguish between left and right mouse clicks

Execute code when the document is ready

Get CSS styles of an element

Get or set the document title

Get or set the HTML of an element

Get, set and remove attributes

Get, set and remove data attributes

Get siblings of an element

Get size of the selected file

Get the closest element by given selector

Get the document height and width

Get the parent node of an element

Get the position of an element relative to another

Get the position of an element relative to the document

Get the selected text

Get the size of an image

Get the text content of an element

Go back to the previous page

Intermediate

Load a CSS file dynamically

Load a JavaScript file dynamically

Measure the width of given text of given font

Paste an image from the clipboard

Paste as plain text

Placeholder for a contenteditable element

Position an element absolutely to another element

Preview an image before uploading it

Resize an image

Resize the width of a text box to fit its content automatically

Save and restore the text selection

Scale a text to fit inside of an element

Scroll an element to ensure it is visible in a scrollable container

Show a custom context menu at clicked position

Show a ghost element when dragging an element

Show a loading indicator when an iframe is being loaded

Allow to enter particular characters only

Calculate the size of scrollbar

Change the website favicon

Check if an element is scrollable

Check if an element is visible in a scrollable container

Communication between an iframe and its parent window

Copy text to the clipboard

Detect if the caps lock is on

Download a file

Export a table to csv

Get the default value of a CSS property

Get the direction of the text selection

Get the first scrollable parent of an element

Highlight an element when dragging a file over it

Advanced

Make a draggable element

Make a resizable element

Resize columns of a table

Scroll to an element smoothly

Show or hide table columns

Sort a table by clicking its headers

Copy highlighted code to the clipboard

Create a custom scrollbar

Create a range slider

Create an image comparison slider

Create resizable split views

Drag and drop element in a list

Drag and drop table column

Drag and drop table row

Tip

Attach event handlers inside other handlers

Follow me on Twitter and GitHub to get more useful contents.