GitHub - posthtml/posthtml-insert-at: PostHTML plugin to append or prepend HTML to a selector

posthtml-insert-at is a PostHTML plugin to append or prepend HTML to a selector.

Examples

Before:

<html>
  <body>
    <main></main>
  </body>
</html>

After:

<html>
  <body>
    <header></header>
    <main></main>
    <footer></footer>
  </body>
</html>

Install

yarn add -D posthtml-insert-at
# OR
npm i posthtml-insert-at

Usage

const fs = require("fs");
const posthtml = require("posthtml");
const { insertAt } = require("posthtml-insert-at");

const html = fs.readFileSync("./index.html");

posthtml()
  .use(
    insertAt({
      /**
       * Specify the selector to append/prepend content to.
       * Example selectors: `main`, `#id`, `.class`, `main.foo`.
       */
      selector: "main",

      /**
       * Prepend HTML markup at the selector.
       */
      prepend: `
        <header>
          <a href="/">Home</a>
        </header>
      `,

      /**
       * Append HTML markup at the selector.
       */
      append: `
        <footer>
          &copy; ${new Date().getFullYear()}
        </footer>
      `,

      /**
       * Specify whether to append/prepend content inside or outside (i.e. adjacent to) of the selector.
       *
       * The default behavior is `inside`.
       */
      behavior: "outside",
    })
  )
  .process(html)
  .then((result) => fs.writeFileSync("./after.html", result.html));

Options

Name	Kind	Description
`selector`	required `string`	Selector to insert markup at (e.g. `.classname`, `#id` or `tag`)
`prepend`	optional `string`	Markup to prepend to the selector
`append`	optional `string`	Markup to append to the selector
`behavior`	optional (`"inside"` or `"outside"`) - default is `"inside"`	Whether to append/prepend content inside or outside of the selector

The plugin accepts an object or an an array of objects.

const option = {
  selector: "body",
  prepend: "<header></header>",
  append: "<footer></footer>",
  behavior: "inside",
};

insertAt(option);
// OR
insertAt([option /*, ...more options */]);

Limitations

Currently, this plugin does not supported nested selectors.

Contributing

See the PostHTML Guidelines.

Changelog

License

MIT