Fast, lightweight HTML injection via string, for when you don’t have access to the DOM (e.g. Node.js).
appendChild() instead.
This library only has 1 dependency: moo, a highly-optimized JS lexer.
If you are searching for a tool to perform this change in bulk, check out the CLI version.
npm i node-inject-html
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>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.
Yes! This library is lightweight and performant enough you may find it handles better than a heavy DOM parser / AST library.
Yes! Any HTML (but note that malformed HTML will break your app—this won’t validate it!)
No. Try node-html-parser or something.
Yes! Contributions are welcome. Please see CONTRIBUTING.md to get started.
**No!**️ If you are running this in the context of a browser, you should use
appendChild() instead.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent