import { inject } from 'node-inject-html';

const html = `<!doctype HTML>
<html>
  <head>
    <link rel="stylesheet" href="/styles.css" />
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
`;

inject(html, {
  headStart: '<script src="https://someanalyticsfunction.com"></script>',
  headEnd:
    '<link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">',
  bodyStart:
    '<noscript>You need JavaScript enabled to run this application.</noscript>',
  bodyEnd: '<script async src="./hmr.js"></script>',
});

// <!doctype HTML>
// <html>
//   <head>
//     <script src="https://someanalyticsfunction.com"></script> <!-- NEW -->
//     <link rel="stylesheet" href="/styles.css" />
//     <link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet"> <!-- NEW -->
//   </head>
//   <body>
//     <noscript>You need JavaScript enabled to run this application.</noscript> <!-- NEW -->
//     <div id="app"></div>
//     <script async src="./hmr.js"></script>
//   </body>
// </html>

FAQ

When do I need this?

This is a useful tool for SSR or any time you need to scan the DOM without having access to the DOM itself, like in Node.

Can I use this in conjunction with jsdom, cheerio, etc.?

Yes! This library is lightweight and performant enough you may find it handles better than a heavy DOM parser / AST library.

Can I insert any HTML?

Yes! Any HTML (but note that malformed HTML will break your app—this won’t validate it!)

I need an AST. Can this do that?

No. Try node-html-parser or something.

Can I add other hooks?

Yes! Contributions are welcome. Please see CONTRIBUTING.md to get started.

Can I use this in a browser?

**No!**️ If you are running this in the context of a browser, you should use appendChild() instead.

Keywords

FAQs

What is node-inject-html?

Is node-inject-html well maintained?

Package last updated on 30 Oct 2020

Did you know?

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

node-inject-html

🧷 node-inject-html

Example

FAQ