❤
npm
Sign UpSign In

posthtml-insert-at
TypeScript icon, indicating that this package has built-in type declarations

0.2.7 • Public • Published

posthtml-insert-at

NPM Build Coverage

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.
       * Selectors include tag name (e.g. `main`), class (e.g. `.main`) or id (e.g. `#main`).
       */
      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

Readme

Keywords

Package Sidebar

Install

npm i posthtml-insert-at

Repository

github.com/posthtml/posthtml-insert-at

Homepage

github.com/posthtml/posthtml-insert-at

Weekly Downloads

1,043

Version

0.2.7

License

MIT

Unpacked Size

13.3 kB

Total Files

12

Last publish

Collaborators

  • metonym
Try on RunKit
Report malware