# insert-html-content

> Insert contents into an HTML of a response body

Latest version **1.0.2** (published 2019-04-23) · ISC license · 0 weekly downloads

## Install

```sh
npm install insert-html-content
pnpm add insert-html-content
yarn add insert-html-content
bun add insert-html-content
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2019-04-23 |
| First published | 2018-10-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 19 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Shinnosuke Watanabe |
| Maintainers | shinnn |
| Keywords | inject, injection, insert, insertion, add, addition, html5, htm, html, http, response, body, modify, modification, streaming, non-buffering |

## Links

- npm: https://www.npmjs.com/package/insert-html-content
- Repository: https://github.com/shinnn/insert-html-content
- Homepage: https://github.com/shinnn/insert-html-content#readme
- Issues: https://github.com/shinnn/insert-html-content/issues
- npm.io page: https://npm.io/package/insert-html-content

## Dependencies (4)

- [content-type](https://npm.io/package/content-type.md) ^1.0.4
- [is-plain-obj](https://npm.io/package/is-plain-obj.md) ^2.0.0
- [inspect-with-kind](https://npm.io/package/inspect-with-kind.md) ^1.0.5
- [parse5-sax-parser](https://npm.io/package/parse5-sax-parser.md) ^5.1.0

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2019-04-23
- 1.0.1 — 2018-11-04
- 1.0.0 — 2018-10-31
- 0.0.3 — 2018-10-20
- 0.0.2 — 2018-10-20
- 0.0.1 — 2018-10-20
- 0.0.0 — 2018-10-20

## README

# insert-html-content

[![npm version](https://img.shields.io/npm/v/insert-html-content.svg)](https://www.npmjs.com/package/insert-html-content)
[![Build Status](https://travis-ci.com/shinnn/insert-html-content.svg?branch=master)](https://travis-ci.com/shinnn/insert-html-content)
[![codecov](https://codecov.io/gh/shinnn/insert-html-content/branch/master/graph/badge.svg)](https://codecov.io/gh/shinnn/insert-html-content)

Insert contents into an HTML of a response body

```javascript
const {createServer} = require('http');
const fetch = require('node-fetch');
const insertHtmlContent = require('insert-html-content');

createServer((req, res) => {
  insertHtmlContent(res, 'Hello ');

  res.setHeader('content-type', 'text/html');
  res.end('<html><body>World</body></html>');
}).listen(3000, async () => {
  await (await fetch('http://localhost:3000')).text(); //=> '<html><body>Hello, World</body></html>'
});
```

## Installation

[Use](https://docs.npmjs.com/cli/install) [npm](https://docs.npmjs.com/about-npm/).

```
npm install insert-html-content
```

## API

```javascript
const insertHtmlContent = require('insert-html-content');
```

### insertHtmlContent(*response*, *content* [, *options*])

*response*: [`http.ServerResponse`](https://nodejs.org/api/http.html#http_class_http_serverresponse)  
*content*: `string`  
*options*: `Object`

If the media type of the response is `text/html`, it inserts a given content into the response body as the first child of `<body>` tag once, with increasing the value of `content-length` header if necessary.

```javascript
const {createServer} = require('http');
const fetch = require('node-fetch');
const injectBody = require('insert-html-content');

const html = Buffer.from('<html><body><h2>Hi</h2></body></html>');
const inserted = '<h1>🏄‍</h1>';

createServer((req, res) => {
  insertHtmlContent(res, inserted);

  res.setHeader('content-type', 'text/html');
  res.setHeader('content-length', 37/* html.length */);
  res.end(html);
}).listen(3000, async () => {
  const response = await fetch('http://localhost:3000');

  Number(response.headers.get('content-length'));
  //=> 53, html.length + Buffer.byteLength(inserted)

  await response.text(); //=> '<html><body><h1>🏄‍</h1><h2>Hi</h2></body></html>'
});
```

If the media type is not `text/html`, or the response body has no `<body>` tag, it does nothing.

### options.tagName

Type: `string`  
Default: `'body'`

Change the insertion target to the given tag.

```javascript
createServer((req, res) => {
  insertHtmlContent(res, '<script src="inserted.js"></script>', {
    tagName: 'head'
  });

  res.setHeader('content-type', 'text/html');
  res.end('<html><head></head></html>');
}).listen(3000, async () => {
  await (await fetch('http://localhost:3000')).text(); //=> '<html><head><script src="inserted.js"></script></head></html>'
});
```

### options.insertToEnd

Type: `boolean`  
Default: `false`

When this option is `true`, it inserts a content to the last child of the target tag instead.

Default:

```html
<body><div>existing content</div><div>inserted content</div></body>
```

`insertToEnd: true`:

```html
<body><div>inserted content</div><div>existing content</div></body>
```

### class insertHtmlContent.InsertHtmlContent(*contents* [, *options*])

*content*: `string`  
*options*: `Object`  
Return: `Function`

Create a new `insertHtmlContent` function with the fixed `content` and `options`. Use this class if a server will insert the same contents into every HTML response many times.

```javascript
const {InsertHtmlContent} = require('insert-html-content');

const injectStyle = new InsertHtmlContent('<style>body {color: red}</style>');
```

## License

[ISC License](./LICENSE) © 2018 - 2019 Shinnosuke Watanabe

---
_Source: https://npm.io/package/insert-html-content · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._