Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
examples		examples
src		src
tests		tests
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
LICENSE		LICENSE
README.md		README.md
package.json		package.json
tsconfig.json		tsconfig.json
yarn.lock		yarn.lock

Repository files navigation

posthtml-insert-at

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 */]);