🧷 node-inject-html
Fast, lightweight HTML injection via string, for when you don’t have access to the DOM (e.g. Node.js).
⚠️ If you do have access to the DOM, don’t use this! Use
appendChild()
instead.
This library only has 1 dependency: moo, a highly-optimized JS lexer.
Example
npm i node-inject-html
; const html = `<!doctype HTML><html> <head> <link rel="stylesheet" href="/styles.css" /> </head> <body> <div id="app"></div> </body></html>`; ; // <!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.