It appears that your data structure doesn't quite match what you had in your script so some of the corrections here (from your version) are:

• change .firstName to .name.first
• reference results array so results.name becomes results[i].name
• email shows undefined but that's because it is not in the data (at least not in your example)
• the image tag shows up with the right source, but because those are not full urls, the image will likely appear broken until the data is more realistic.

The following script should append both the div with the name/email and the image.

function appendData(data) {
    var mainContainer = document.getElementById("myData");
    for (var i = 0; i < data.results.length; i++) {
        var div = document.createElement("div");
        div.innerHTML = 'Email: ' + data.results[i].email + ' First Name :' + data.results[i].name.first;
        mainContainer.appendChild(div);
        var img = document.createElement("img");
        img.src = data.results[i].picture.large;
        mainContainer.appendChild(img);
    }
}

Try This:

function appendData(data) {
    var mainContainer = document.getElementById("myData");
    for (var i = 0; i < data.results.length; i++) {
        var div = document.createElement("div"); 
        div.innerHTML = 'Email: ' + (data.results[i].email?data.results[i].email:'') + ' First Name :' + (data.results[i].name?data.results[i].name.first:'');
        mainContainer.appendChild(div);
    }
}