Javascript 将标题和艺术家添加到DIV

我正试图找出如何从这段代码将歌曲标题“一个艺术家”输入到每个div中。此代码将XML文件中的所有歌曲放入播放列表中。我的片名是songTitle，艺人是artists。尝试复制getplayList函数中的内容并删除输出，然后放入onsongSelect函数文档。getElementById（“songTitle”）。innerHTML=title；但我只得到了最后一首歌的标题在播放列表中的div。任何帮助将不胜感激

function getplayList()
    {
        var parser = new DOMParser();
        xmlDocument = parser.parseFromString(xml, "text/xml");
        var elementsArray = xmlDocument.documentElement.getElementsByTagName    ('composition');
        var arrayLength = elementsArray.length;
        var output = "<ul>";

        for(var i=0; i < arrayLength; i++)
        {
            var title = elementsArray[i].getElementsByTagName('title')[0].firstChild.nodeValue;
            var artist = elementsArray[i].getElementsByTagName('artist')[0].firstChild.nodeValue;
            var time = elementsArray[i].getElementsByTagName('time')[0].firstChild.nodeValue;
            var fileName = elementsArray[i].getElementsByTagName('filename')[0].firstChild.nodeValue;


            output +=  ("<li onclick='songSelect(\"" + fileName + "\")'>" + title + " -  " + artist + "</li>");


        }

            output += "</ul>";
            document.getElementById("playList").innerHTML = output;
    }

XML文件仅显示了三首歌曲，还有更多歌曲需要发布：

var xml = '<?xml version="1.0" encoding="utf-8"?>';

xml +='<music>';
xml +='    <composition>';
xml +='    <title>Songs On The Radio</title>';
xml +='    <artist>No Justice</artist>';
xml +='    <time>4.24</time>';
xml +='    <filename>Songs On The Radio.mp3</filename>';
xml +=' </composition>';
xml +=' <composition>';
xml +='    <title>Chillin It</title>';
xml +='    <artist>Cole Swindell</artist>';
xml +='    <time>3.17</time>';
xml +='    <filename>Chillin It.mp3</filename>';
xml +=' </composition>';
xml +=' <composition>';
xml +='    <title>Tippin Point</title>';
xml +='    <artist>Dallas Smith</artist>';
xml +='    <time>2.58</time>';
xml +='    <filename>Tippin Point.mp3</filename>';
xml +=' </composition>';
xml +='</music>';

var xml=''；
xml+=''；
xml+=''；
xml+=“收音机上的歌曲”；
xml+=‘没有正义’；
xml+='4.24'；
xml+=“收音机上的歌曲.mp3”；
xml+=''；
xml+=''；
xml+=“Chillin It”；
xml+='Cole Swindell'；
xml+='3.17'；
xml+=“Chillin It.mp3”；
xml+=''；
xml+=''；
xml+=‘Tippin点’；
xml+=‘达拉斯史密斯’；
xml+='2.58'；
xml+='Tippin Point.mp3'；
xml+=''；
xml+=''；

不要关闭脚本中的

ul

，假设它在HTML中已关闭。对此进行评论是可行的

见：

更新

在这种情况下，您可以更改

songSelect

方法以接受元素参数以获取单击的元素，前提是您的

div

的ID为

nowPlaying

：

function songSelect(fn, element) {
    document.getElementById("songs").src = fn;
    playMusic();        
    document.getElementById("nowPlaying").innerHTML = "Now Playing: " + element.innerHTML
}

并在for循环中进行以下更改：

output+=（“
”>“+title+”-“+artist+”
”）


奖金

这里是一个快速而肮脏的jQuery演示：
你能发布你的xml文件样本吗？发布的xml文件样本。我可以在播放列表中显示歌曲和艺术家。当我点击播放列表中的（li）时，尝试在不同的分区加载艺术家和歌曲。当我点击播放列表中的每一首歌曲时，歌曲就会播放；我尝试了您现在建议的，songTitle div中显示的内容现在正在播放：---正在查找从XML文件中仅在songTitle div中获取歌曲标题。谢谢您，先生。我必须签出jquery。仅仅学习javascript，jquery似乎还有很多东西要做。所有这些对我来说仍然有点困惑。是的，在开始使用jQuery之前先了解javascript的基本知识是一个很好的计划，通过这种方式，您将从两者中获得更多。但从我所看到的情况来看，您已经很好地掌握了javascript。
function songSelect(fileName, songTitle) {
        document.getElementById("songs").src = fileName;
        playMusic();        
        document.getElementById("nowPlaying").innerHTML = "Now Playing: " + songTitle
    }