How to display html string in javascript

Question

In this tutorial, we are going to learn about how to render the html string as real dom elements in React app.

Table of Contents Show

Rendering the HTML
How do I display the HTML tag of a string?
How do you display a string in JavaScript?
How do you display HTML tags in JavaScript?
How can I write HTML code as a JavaScript string?

If we try to use JSX curly brace syntax { } to render an html string, react will treated it as a plain text (to prevent from the cross-site scripting attacks).

App.js

import React from "react";

export default function App() {
  const htmlString = "<h2>Hello World</h2>";
  return <div>{htmlString}</div>;
}

Rendering the HTML

To render the html string in react, we can use the dangerouslySetInnerHTML attribute which is a react version of dom innerHTML property.

Example:

App.js

import React from "react";

export default function App() {
  const htmlString = "<h2>Hello World</h2>";
  return <div dangerouslySetInnerHTML={{ __html: htmlString }}>         </div>;
}

The term dangerously is used here to notify you that it will be vulnerable to cross-site scripting attacks (XSS).

Similarly, you can also use the html-react-parser library to render the html string.

App.js

import React from "react";
import parse from "html-react-parser";
export default function App() {
  const htmlString = "<h2>Hello World</h2>";

  return <div>{parse(htmlString)}</div>;}

Ordinarily, strings are inserted as plain text, meaning that characters like < and > have no special meaning.

But sometimes you need to render HTML directly into a component. For example, the words you're reading right now exist in a markdown file that gets included on this page as a blob of HTML.

In Svelte, you do this with the special {@html ...} tag:

Svelte doesn't perform any sanitization of the expression inside {@html ...} before it gets inserted into the DOM. In other words, if you use this feature it's critical that you manually escape HTML that comes from sources you don't trust, otherwise you risk exposing your users to XSS attacks.

Problem:

I am a new javascript developer. I have a string that may contain HTML tags. My problem is when I try to render them the tags displayed on the page. For example, It shows <i> tags rather than making the string italic. This is my code:

const newHtml =  '<div class="col-lg-4 col-references" 
idreference="'+updated_response+'">
<div id="contentRefer'+updated_response+'">'+updated_summary+'</div>
<span id="nameRefer'+updated_response+'">'+updated_name+'</span>
</div>';
$("#references").append(newHtml);

So in this article, we are going to learn how to render HTML in strings with JavaScript?

Solution 1:

To solve this problem, you can use $.parseHTML before appending the HTML:

const newHtml =  '<div class="col-lg-4 col-references" 
idreference="'+updated_response+'">
<div id="contentRefer'+updated_response+'">'+updated_summary+'</div>
<span id="nameRefer'+updated_response+'">'+updated_name+'</span>
</div>';
newHtml = $.parseHTML( newHtml);
$("#references").append(newHtml);

Solution 2:

You can render HTML using document.write().

document.write('<html><body><p>This is a paragraph</p></body></html>');

And if you want to append the existing HTML string. First, you have to get the if of the tag then you can insert your HTML string there. There is two option to do this:

1. You can do this using DOM. This is how you manipulate DOM:

const getElement = document.getElementById('elementID');
const NewElement = document.createElement('p');
NewElement.appendChild(document.createTextNode('This is a demo string'));

2. Or, you can use innerHTML.

const getElement = document.getElementById('elementID');
getElement.innerHTML = 'This is a demo string';

Hope this solves your problem. If you have any questions you can comment below.

How do I display the HTML tag of a string?

If you want to append some HTML text to the document. body then you should use document. body. insertAdjacentHTML('beforeend', str); .

How do you display a string in JavaScript?

Creating and Viewing the Output of Strings In JavaScript, there are three ways to write a string — they can be written inside single quotes ( ' ' ), double quotes ( " " ), or backticks ( ` ` ).