When updating the HTML content, JavaScript is outputting the code as text instead of running it

Question

When updating the HTML content, JavaScript is outputting the code as text instead of running it

I am encountering an issue with adding the body content of a JSON file, which contains HTML code, to my existing HTML. Instead of executing the code, it appears as text within paragraph or header elements. I have searched through various discussions but have been unable to find a solution. Could someone please assist me in identifying what mistake I may be making?

<div id="title">

</div>


<div id="body">

</div>

<script>
  var requestURL = 'https://secure.toronto.ca/cc_sr_v1/data/swm_waste_wizard_APR?limit=1000';
  var request = new XMLHttpRequest();
  request.open('GET', requestURL);
  request.responseType = 'json';
  request.send();
  request.onload = function() {
    var data = request.response;
    document.getElementById("title").innerHTML = data[0].title;
    document.getElementById("body").innerHTML = data[0].body;
  }
</script>

javascript html css json

Answer 1

Answer №1

To convert a string with HTML entities into a string of HTML that can be rendered as a DOM element, you can utilize the DOMParser.

document.getElementById("body").innerHTML = htmlDecode("&lt;ul&gt; \n &lt;li&gt;Place item in the &lt;strong&gt;Garbage Bin.&lt;/strong&gt;&lt;/li&gt; \n&lt;/ul&gt;");

function htmlDecode(input) {
  var doc = new DOMParser().parseFromString(input, "text/html");
  return doc.documentElement.textContent;
}

<div id="body"></div>

You can implement this method as shown below:

<div id="title"></div>
<div id="body"></div>

<script>

  function htmlDecode(input) {
    var doc = new DOMParser().parseFromString(input, "text/html");
    return doc.documentElement.textContent;
  }

  var requestURL = 'https://secure.toronto.ca/cc_sr_v1/data/swm_waste_wizard_APR?limit=1000';
  var request = new XMLHttpRequest();
  request.open('GET', requestURL);
  request.responseType = 'json';
  request.send();
  request.onload = function() {
    var data = request.response;
    document.getElementById("title").innerHTML = htmlDecode(data[0].title);
    document.getElementById("body").innerHTML = htmlDecode(data[0].body);
  }
</script>

Acknowledgment to this source for introducing DOMParser.

Answer 2

To convert a string with HTML entities into a string of HTML that can be rendered as a DOM element, you can utilize the DOMParser.

document.getElementById("body").innerHTML = htmlDecode("&lt;ul&gt; \n &lt;li&gt;Place item in the &lt;strong&gt;Garbage Bin.&lt;/strong&gt;&lt;/li&gt; \n&lt;/ul&gt;");

function htmlDecode(input) {
  var doc = new DOMParser().parseFromString(input, "text/html");
  return doc.documentElement.textContent;
}

<div id="body"></div>

You can implement this method as shown below:

<div id="title"></div>
<div id="body"></div>

<script>

  function htmlDecode(input) {
    var doc = new DOMParser().parseFromString(input, "text/html");
    return doc.documentElement.textContent;
  }

  var requestURL = 'https://secure.toronto.ca/cc_sr_v1/data/swm_waste_wizard_APR?limit=1000';
  var request = new XMLHttpRequest();
  request.open('GET', requestURL);
  request.responseType = 'json';
  request.send();
  request.onload = function() {
    var data = request.response;
    document.getElementById("title").innerHTML = htmlDecode(data[0].title);
    document.getElementById("body").innerHTML = htmlDecode(data[0].body);
  }
</script>

Acknowledgment to this source for introducing DOMParser.

Answer 3

Answer №2

I recently utilized jQuery's "unescape" function, which can be found at this link

The unescape() method generates a new string by replacing hexadecimal escape sequences with their corresponding characters. These escape sequences are commonly generated by functions like escape. It is typically recommended to use decodeURI or decodeURIComponent instead of unescape.

Feel free to give this a try, I hope it proves useful. Thank you

In my recent project, I came across the following JavaScript code snippet:
var requestURL = 'https://secure.toronto.ca/cc_sr_v1/data/swm_waste_wizard_APR?limit=1000';
  var request = new XMLHttpRequest();
  request.open('GET', requestURL);
  request.responseType = 'json';
  request.send();
  request.onload = function() {
    var data = request.response;
    var title_ = $("<p/>").html(data[0].title).text(); 
    var body_ = $("<p/>").html(data[0].body).text(); 
    //$('#body').append($.parseHTML(unescape(data[0].body)));
    $('#title').append(title_);
    $('#body').append(body_);
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="title">

</div>

<div id="body">

</div>

Remember to insert/prepend the data[i] to the elements, rather than setting the value directly (like ht)

Answer 4

I recently utilized jQuery's "unescape" function, which can be found at this link

The unescape() method generates a new string by replacing hexadecimal escape sequences with their corresponding characters. These escape sequences are commonly generated by functions like escape. It is typically recommended to use decodeURI or decodeURIComponent instead of unescape.

Feel free to give this a try, I hope it proves useful. Thank you

In my recent project, I came across the following JavaScript code snippet:
var requestURL = 'https://secure.toronto.ca/cc_sr_v1/data/swm_waste_wizard_APR?limit=1000';
  var request = new XMLHttpRequest();
  request.open('GET', requestURL);
  request.responseType = 'json';
  request.send();
  request.onload = function() {
    var data = request.response;
    var title_ = $("<p/>").html(data[0].title).text(); 
    var body_ = $("<p/>").html(data[0].body).text(); 
    //$('#body').append($.parseHTML(unescape(data[0].body)));
    $('#title').append(title_);
    $('#body').append(body_);
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="title">

</div>

<div id="body">

</div>

Remember to insert/prepend the data[i] to the elements, rather than setting the value directly (like ht)

When updating the HTML content, JavaScript is outputting the code as text instead of running it

Answer №1

Answer №2

Similar questions

Can markers be positioned on top of scroll bars?

Guide to creating a toggle button

Resolving "Module not found: Error: Can't resolve 'url'" issue in Angular 14 while invoking web3 smart contract function

Is it possible to access a PHP array file from a server using JSON in JavaScript for data visualization?

Why does one image render while the other with the same src does not?

In a jQuery conditional statement, selecting the second child of the li element for targeting

Using an action code to retrieve the current user from firebase: A step-by-step guide

Utilizing promise values within asynchronous functions

Struggling with incorporating a lightbox within an accordion feature in an .html file

What is the best way to store a video file in a database?

Why am I unable to choose an element by its Id?

Disposing of memory in THREE JS when switching between routes in VUE

Looking to update the URL from another component?

Having trouble with the setHours function in React not behaving as anticipated?

Ways to extract link value in Angular

What is the term used for the objects that res.render passes?

Circular dependency situation encountered in Angular 2 shared module

A step-by-step guide to loading a .php file via Ajax using JQuery when an item is selected from a dropdown

Automatically activate a button when it comes into view while scrolling

Function not currently in operation