Nonlinear Programming Methods
    Have ideas to improve npm?Join in the discussion! »

    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

    Install

    npm i posthtml-insert-at

    DownloadsWeekly Downloads

    225

    Version

    0.2.7

    License

    MIT

    Unpacked Size

    13.3 kB

    Total Files

    12

    Last publish

    Collaborators

    • avatar