Premium
JAVASCRIPT Snippets.

Programmatically Scrolling to an Element or Page Position

Implement smooth scrolling in JavaScript to bring specific elements into view or navigate to precise pixel positions on a webpage.

Managing Plain Text Content with textContent

Safely retrieve and update the plain text content of any HTML element using the `textContent` property, a secure alternative to `innerHTML` for display text.

Dynamically Creating and Appending a New DOM Element

Learn how to create a new HTML element, set its text content and attributes, and efficiently append it to an existing parent element in the DOM using JavaScript.

Removing a Specific Element from the DOM

Discover how to effectively remove an existing HTML element from the document object model using JavaScript's `remove()` method, ensuring a clean and updated UI.

Replacing One DOM Element with Another

Learn to replace an existing HTML element in the DOM with a completely new one using `Node.replaceChild()`, enabling dynamic content updates without full re-renders.

Efficiently Traversing the DOM with `closest()` and Sibling Properties

Master common DOM traversal techniques including finding the nearest ancestor with `closest()` and navigating to adjacent siblings using `nextElementSibling` and `previousElementSibling`.

Updating Element Content with `innerHTML` (and Security Caution)

Learn how to dynamically change the HTML content of a DOM element using the `innerHTML` property, while understanding and mitigating potential Cross-Site Scripting (XSS) risks.

Dynamically Add or Remove CSS Classes

Learn to efficiently add, remove, or toggle CSS classes on DOM elements using JavaScript's `classList` API for dynamic styling and interactive user interfaces.

Efficiently Update Multiple DOM Elements with DocumentFragment

Optimize DOM manipulation by using `DocumentFragment` to add multiple elements in a single reflow, reducing performance overhead for large lists or dynamic content.

Implement Event Delegation for Dynamic DOM Elements

Master event delegation in JavaScript to efficiently handle events on dynamically added elements or large lists by attaching a single listener to a parent element.

Get and Set Custom Data Attributes on DOM Elements

Learn to use JavaScript to easily access and modify custom `data-*` attributes, providing a flexible way to store and retrieve element-specific information directly in HTML.

Creating and Using Custom Directives in Vue 3

Learn to extend Vue 3's capabilities by creating custom directives for low-level DOM manipulation, such as focusing an input on mount or handling external clicks.