HTML Code to JavaScript Converter | Online HTML to JS Tool

Online HTML Code Convert To JavaScript Variable. You can use this converted javaScript code as another HTML tag innerHTML or innerText. It is useful for printing HTML code through JavaScript print functions.

Copy and paste single quote or double quote HTML code or plain text, it will solve double single quote problems.

Example

Input HTML code

HTML

<div class="card">
	<h3>HTML To JavaScript</h3>
	<p>This is a description.</p>
</div>

Converted JavaScript

HTML

<pre><code id="js_html"></code></pre>

JavaScript

const js_html = (heading) => {
	let code = "";
	code += '<div class="card">\n';
	code += '\t<h3>'+heading+'</h3>\n';
	code += '\t<p>This is a description.</p>\n';
	code += '</div>\n';
	return code;
};


const html_code = js_html('HTML To JavaScript');

document.getElementById("js_html").innerText = html_code

Try it yourself

⚙️ Convert HTML to JavaScript

Paste any HTML, CSS, or JavaScript code into the editor to convert it into JavaScript-ready string format. This tool allows you to quickly prepare markup or code snippets for dynamic rendering, live preview displays, embedded examples, or runtime content injection.

Whether you are building interactive UI components, documentation demos, modal content, or preview sections, the generated output can be easily integrated into your project for dynamic display and execution.

Input Code

Clear Paste Full screen Dark Upload

Split options

Options

Add line break \n

Preserve Line Breaks

Output Pretty Format

Output Variable Name

String Quote Style

Converted JavaScript

Full Screen Dark Download Line Wrap Copy

const js_html = () => {
	let code = "";
	code += "<div class=\"box\">\n";
	code += "	<h2>HTML To JavaScript</h2>\n";
	code += "	<p>This is a documentation preview block.</p>\n";
	code += "</div>\n";
	code += "\n";
	code += "<ul>\n";
	code += "	<li>One</li>\n";
	code += "	<li>Tow</li>\n";
	code += "\n";
	code += "	<li>Three</li>\n";
	code += "</ul>\n";
	code += "\n";
	code += "<style>\n";
	code += "	h2 {color: #f00}\n";
	code += "	p {color: #000}\n";
	code += "</style>\n";
	code += "\n";
	code += "<script>\n";
	code += "	console.log(\"hello\")\n";
	code += "\x3c/script>\n";
	code += "\n";
	return code;
};

Usage

HTML

<textarea id="html-text" cols="30" rows="10"></textarea>

<pre><code id="js_html"></code></pre>

JavaScript

document.getElementById("js_html").innerText = js_html();
document.getElementById("html-text").value = js_html();
// or
// document.write(js_html())

Report Problem