Socket
Book a DemoInstallSign in
Socket
Book a DemoInstallSign in

posthtml-insert-at

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

posthtml-insert-at

PostHTML plugin to append or prepend HTML to a selector

latest
Source
npmnpm
Version
0.2.7
Version published
Weekly downloads
1.9K
-0.52%
Maintainers
1
Weekly downloads
 
Created
Source

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

NameKindDescription
selectorrequired stringSelector to insert markup at (e.g. .classname, #id or tag)
prependoptional stringMarkup to prepend to the selector
appendoptional stringMarkup to append to the selector
behavioroptional ("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

Keywords

html
posthtml
posthtml-plugin
insert
prepend
append

FAQs

Package last updated on 30 Jun 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Reachability for Ruby Now in Beta

Product

Reachability for Ruby Now in Beta

Reachability analysis for Ruby is now in beta, helping teams identify which vulnerabilities are truly exploitable in their applications.

By Oskar Haarklou Veileborg  -  Nov 17, 2025
npm Malware Campaign Uses Adspect Cloaking to Deliver Malicious Redirects

Research

/

Security News

npm Malware Campaign Uses Adspect Cloaking to Deliver Malicious Redirects

Malicious npm packages use Adspect cloaking and fake CAPTCHAs to fingerprint visitors and redirect victims to crypto-themed scam sites.

By Olivia Brown  -  Nov 17, 2025