dom-mutator

For those times you need to apply persistent DOM changes on top of HTML you don’t control.

No dependencies, written in Typescript, 100% test coverage
Super fast and light-weight (1Kb gzipped)
Persists mutations even if the underlying element is updated externally (e.g. by a React render)
Picks up new matching elements that are added to the DOM
Easily remove a mutation at any time

Demo

import mutate from "dom-mutator"

// Start mutating
const mutation = mutate.html(".demo", html => html.toUpperCase());

// Stop mutating
mutation.revert();

Usage

yarn add dom-mutator OR npm install --save dom-mutator.

import mutate from "dom-mutator";

mutate.html(".demo", html => html.toUpperCase());

mutate.classes("div.greeting", classes => classes.add("new-class"));

mutate.attr(".get-started", "title", (oldVal) => "This is my new title attribute");

And there’s even a declarative option if you don’t want to use callbacks:

import mutate from "dom-mutator";

mutate.declarative({
  selector: "h1",
  action: "set",
  attribute: "html",
  value: "hello world"
});

attribute can be “html” or any valid html attribute (title, class, href, etc.).

action can be “set” or “append”. If the attribute is “class”, there is an additional “remove” action you can use.

dom-mutator

Apply persistent DOM Mutations on top of HTML you don't control.

Demo

Usage