https://github.com/posthtml/posthtml-insert-at
PostHTML plugin to append or prepend HTML to a selector
https://github.com/posthtml/posthtml-insert-at
append posthtml posthtml-plugin prepend
Last synced: 6 months ago
JSON representation
PostHTML plugin to append or prepend HTML to a selector
- Host: GitHub
- URL: https://github.com/posthtml/posthtml-insert-at
- Owner: posthtml
- License: mit
- Created: 2019-06-23T19:55:54.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-04-24T13:53:54.000Z (almost 2 years ago)
- Last Synced: 2024-10-29T21:06:06.256Z (over 1 year ago)
- Topics: append, posthtml, posthtml-plugin, prepend
- Language: TypeScript
- Homepage:
- Size: 432 KB
- Stars: 9
- Watchers: 4
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# posthtml-insert-at 
[![NPM][npm]][npm-url]
`posthtml-insert-at` is a [PostHTML](https://github.com/posthtml/posthtml) plugin to append or prepend HTML to a selector.
## [Examples](examples/)
**Before:**
```html
```
**After:**
```html
```
## Install
```bash
yarn add -D posthtml-insert-at
# OR
npm i posthtml-insert-at
```
## Usage
```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.
* Example selectors: `main`, `#id`, `.class`, `main.foo`.
*/
selector: "main",
/**
* Prepend HTML markup at the selector.
*/
prepend: `
Home
`,
/**
* Append HTML markup at the selector.
*/
append: `
© ${new Date().getFullYear()}
`,
/**
* 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.
```js
const option = {
selector: "body",
prepend: "",
append: "",
behavior: "inside",
};
insertAt(option);
// OR
insertAt([option /*, ...more options */]);
```
## Limitations
Currently, this plugin does not supported nested selectors.
## Contributing
See the [PostHTML Guidelines](https://github.com/posthtml/posthtml/tree/master/docs).
## [Changelog](CHANGELOG.md)
## License
[MIT](LICENSE)
[npm]: https://img.shields.io/npm/v/posthtml-insert-at.svg?color=blue
[npm-url]: https://npmjs.com/package/posthtml-insert-at