posthtml-insert-at is a PostHTML plugin to append or prepend HTML to a selector.
Before:
<html>
<body>
<main></main>
</body>
</html>After:
<html>
<body>
<header></header>
<main></main>
<footer></footer>
</body>
</html>yarn add -D posthtml-insert-at
# OR
npm i posthtml-insert-atconst 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: `
<header>
<a href="?u=http://github.com/">Home</a>
</header>
`,
/**
* Append HTML markup at the selector.
*/
append: `
<footer>
© ${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));| 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 */]);Currently, this plugin does not supported nested selectors.
See the PostHTML Guidelines.