PostHTML plugin to append or prepend HTML to a selector
npm install posthtml-insert-at[![NPM][npm]][npm-url]
[![Build][build]][build-badge]
[![Coverage][codecov-shield]][codecov]
posthtml-insert-at is a PostHTML plugin to append or prepend HTML to a selector.
Before:
``html`
After:
`html`
`bash`
yarn add -D posthtml-insert-atOR
npm i posthtml-insert-at
`js
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:
Home
,
/**
* Append HTML markup at the selector.
*/
append:
,
/**
* 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));
| 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.
`js
const option = {
selector: 'body',
prepend: '
append: '',
behavior: 'inside'
};
insertAt(option);
// OR
insertAt([option /, ...more options /]);
``
Currently, this plugin does not supported nested selectors.
See the PostHTML Guidelines.
[npm]: https://img.shields.io/npm/v/posthtml-insert-at.svg?color=blue
[npm-url]: https://npmjs.com/package/posthtml-insert-at
[build]: https://travis-ci.org/posthtml/posthtml-insert-at.svg?branch=master
[build-badge]: https://travis-ci.com/posthtml/posthtml-insert-at
[codecov]: https://codecov.io/gh/posthtml/posthtml-insert-at
[codecov-shield]: https://img.shields.io/codecov/c/github/posthtml/posthtml-insert-at.svg