Question

32

How can I render html code in a div using Javascript or jQuery

rated 0 times [ 33] [ 1] / answers: 1 / hits: 42236 / 8 Years ago, fri, january 20, 2017, 12:00:00

I'm trying to render some HTML on the fly in my website without success. I've tried using jQuery's .html() function as below:

My html

<div id='open_ender_output'></div>

My JQuery

var openEnderContent = &lt;p&gt;&lt;span style=color: #ff0000;&gt;DDD&lt;/span&gt;!!!!!&lt;strong&gt;666666666666&lt;/strong&gt;&lt;/p&gt;

//openEnderContent comes from my backend

$('#open_ender_output').html(openEnderContent)

The result is

<p><span style=color: #ff0000;>DDD</span>!!!!!<strong>666666666666</strong></p>

Is there a way to make the browser render that result on the fly so it reflects the specific styles set on the text?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

daquanmilesw

Add To Favorites

Follow

Total Points: 57

Total Questions: 102

Total Answers: 110

Location: Wallis and Futuna

Member since Sat, Aug 6, 2022

2 Years ago

daquanmilesw questions

1 array.filter is returning entire object instead of just one value

Thu, Jan 13, 22, 00:00, 2 Years ago

1 How to make Swiper JS display faction pagination and progress bar at the same time?

Tue, Jul 13, 21, 00:00, 3 Years ago

1 How can I do top level await

Sat, Jul 10, 21, 00:00, 3 Years ago

1 Svelte reactivity not triggering when variable changed in a function

Thu, Sep 17, 20, 00:00, 4 Years ago

1 Importing node modules in a WordPress plugin

Wed, Jun 24, 20, 00:00, 4 Years ago

View All

answered 8 Years ago devonw · Accepted Answer

Decode the content by creating a temporary element.

var openEnderContent = '&lt;p&gt;&lt;span style=color: #ff0000;&gt;DDD&lt;/span&gt;!!!!!&lt;strong&gt;666666666666&lt;/strong&gt;&lt;/p&gt;';



$('#open_ender_output').html(

  // create an element where the html content as the string

  $('<div/>', {

    html: openEnderContent

  // get text content from element for decoded text  

  }).text()

)

<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>

<div id='open_ender_output'></div>

Or you need to use a string which contains unescaped symbols.

var openEnderContent = '<p><span style=color: #ff0000;>DDD</span>!!!!!<strong>666666666666</strong></p>';



$('#open_ender_output').append(openEnderContent);

<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>

<div id='open_ender_output'></div>