Loading DIV content via ajax as HTML

Question

I think I have a very simple question, but I couldn't find a solution. So what I want is to load a DIV content via HTML. The problem is that it is not just a text, but also an image. The ajax call returns the HTML code, but this is displayed in the DIV as HTML and is not executed. Difficult to explain, but obvious from the example... The AJAX call returns the string:

<img src="/images/weather/1.png" width="80px"><br>3.3 °C

The problem is obvious. Instead of an image and the 3.3°C in the div, I get the actual code, so instead of the image I see img src=....

I know that i need to somehow decode the HTML, but I have no clue how to do this and would very much appreciate any help.

My Javascript code is:

var xmlhttp;
if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp = new XMLHttpRequest();
} else {
    // code for IE6, IE5
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        newtext = xmlhttp.responseText;
    }
}
xmlhttp.open("GET", "message_ajax.php", true);
xmlhttp.send();
$('#text').fadeOut(function () {
    $(this).text(newtext).fadeIn();
})

Answer 1

You should use $(this).html(newtext) instead of $(this).text(newtext).

They are quite different. .text() will "escape" your HTML and insert it as simply text. Or as the documentation states:

We need to be aware that this method escapes the string provided as necessary so that it will render correctly in HTML. To do so, it calls the DOM method .createTextNode(), does not interpret the string as HTML.

You should always read the documentation first.

---

If you are already using jQuery, you could use it's AJAX methods which make your life much easier.

Answer 2

Are you looking for something like this ? https://api.jquery.com/load/

Where you can just load HTML into a DIV using ajax. Seems to be what you're asking...

$( "#result" ).load( "ajax/test.html" );

Where your ajax/test.html file contains

<img src="/images/weather/1.png" width="80px">

Edited... to be more specific. This is using jQuery.

Answer 3

document.getElementById("divId").innerHTML = "<img ..........";    

OR

$("#divId").html("<img ..........");