Question

我正在尝试将图像附加到跨度中，它可以使用以下方式将图像路径完美地输出为文本：

homeTeamName_span.appendChild(homeTeamName_crest);

然而，当尝试在其周围包装图像标签时，它不会做任何事情，也不会因此而加载数据。

这是什么原因？

homeTeamName_span.appendChild("<img src='homeTeamName_crest' />");

功能源

    window.onload = function() {
var xmlhttp = new XMLHttpRequest();
var url = "http://bushell.net/football/site/includes/webservice.php?service=allfixtures&limit=10&competition=427";
var url2 = "http://bushell.net/football/site/includes/webservice.php?service=allfixtures&limit=10&competition=426"

xmlhttp.onreadystatechange=function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        getECL(xmlhttp.responseText);
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

function getECL(response) {
    var ECL_arr = JSON.parse(response);
    var i;
    //add 6hrs
    var ecl_games = document.getElementById("ecl-games");
    for(i = 0; i < ECL_arr.length; i++) {
        var gameInfo_container = document.createElement("LI");
        ecl_games.appendChild(gameInfo_container);

        var homeTeamName_span = document.createElement("SPAN");
        homeTeamName_span.className = "text-right";
        var homeTeamName_text = document.createTextNode(ECL_arr[i].homeTeamName);
        homeTeamName_span.appendChild(homeTeamName_text);
        gameInfo_container.appendChild(homeTeamName_span);

        var date_span = document.createElement("SPAN");
        date_span.className = "d-g";
        var date_span_text = document.createTextNode(ECL_arr[i].date);
        date_span.appendChild(date_span_text);
        gameInfo_container.appendChild(date_span);

        var awayTeamName_span = document.createElement("SPAN");
        awayTeamName_span.className = "text-left";
        var awayTeamName_text = document.createTextNode(ECL_arr[i].awayTeamName);
        awayTeamName_span.appendChild(awayTeamName_text);
        gameInfo_container.appendChild(awayTeamName_span);
    }

    xmlhttp.onreadystatechange=function() {
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            getPrem(xmlhttp.responseText);
        }
    }

    xmlhttp.open("GET", url2, true);
    xmlhttp.send();     
function getPrem(response){
        var prem_arr = JSON.parse(response);
        var prem_games = document.getElementById("prem-games");
        for(var j = 0; j<prem_arr.length; j++) {
            var gameInfo_container = document.createElement("LI");
            prem_games.appendChild(gameInfo_container);

            var homeTeamName_span = document.createElement("SPAN");
            homeTeamName_span.className = "text-right";
            var homeTeamName_text = document.createTextNode(prem_arr[j].homeTeamName);
            var homeTeamName_crest = document.createTextNode(prem_arr[j].homeTeamCrest);
            homeTeamName_span.appendChild("<img src='homeTeamName_crest' />");
            homeTeamName_span.appendChild(homeTeamName_text);
            gameInfo_container.appendChild(homeTeamName_span);

            var date_span = document.createElement("SPAN");
            date_span.className = "d-g";
            var date_span_text = document.createTextNode(prem_arr[j].date);
            date_span.appendChild(date_span_text);
            gameInfo_container.appendChild(date_span);

            var awayTeamName_span = document.createElement("SPAN");
            awayTeamName_span.className = "text-left";
            var awayTeamName_text = document.createTextNode(prem_arr[j].awayTeamName);
            awayTeamName_span.appendChild(awayTeamName_text);
            gameInfo_container.appendChild(awayTeamName_span);
        }
        console.log("loop finished");
    }
}

Answer 1

如果homeTeamName_crest是图片的路径

，这个应该工作

$(homeTeamName_span).append("<img src='"+homeTeamName_crest+"' />")

Answer 2

如果你这样做怎么办？

var homeTeamName_crest = prem_arr[j].homeTeamCrest; // <--- change this line, don't make it a textNode
homeTeamName_span.appendChild("<img src='" + homeTeamName_crest + '/>"); // <--- change this line, we want to interpolate the string as the path to the image

jQuery AppendChild与图像

2 个答案: