js/document-write

Why

document.write blocks the HTML parser while it runs; a script written with it must download before the page can continue, and Chrome may refuse to run such a script on slow connections. Called after the page has loaded, it wipes the whole document. It also writes raw markup, so untrusted text becomes script.

Fix

Create elements (document.createElement, append, textContent) or use a <template>. Load a third-party script with <script async src> or by appending a script element.

Examples

// bad
document.write('<script src="https://example.com/widget.js"><\/script>')
// good
const script = Object.assign(document.createElement('script'), { src: 'https://example.com/widget.js', async: true })
document.head.append(script)

Sources

• MDN, Document.write() (warning and notes)

Read it in the terminal

npx github:dawidolko/frontend-skills explain js/document-write