javascript - 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

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.