Question

我有一个免费的html5电台播放器，我需要添加来自工作javascript的歌曲标题：

 <div id="track_name"></div>

（＆＃34; track_name＆＃34;由java脚本函数生成并正常工作。打印：＆＃34; Abba - 新年快乐＆＃34;

我想插入＆＃34; track_name＆＃34;在html5播放器中，此处位于 PLACE ：

 <li data-artist="PLACE" data-image="audios/test.jpg" data-live="true">
                <div class="amazingaudioplayer-source" data-src="http://music.com:8003/mp3.mp3" data-type="audio/mpeg" />
   </li>

两个代码都在同一个html页面中。

感谢您的帮助！

UPDATE，complet code：

这是index.html：

<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <meta name="viewport" content="width=device-width">
    <title>Amazing HTML5 Audio Player, powered by http://amazingaudioplayer.com</title>

    <!-- Insert to your webpage before the </head> -->
    <script src="audioplayerengine/jquery.js"></script>
    <script src="audioplayerengine/amazingaudioplayer.js"></script>
    <link rel="stylesheet" type="text/css" href="audioplayerengine/initaudioplayer-1.css">
    <script src="audioplayerengine/initaudioplayer-1.js"></script>
    <!-- End of head section HTML codes -->

</head>
<body>
<div style="margin:12px auto;">

    <!-- Insert to your webpage where you want to display the audio player -->
    <div id="amazingaudioplayer-1" style="display:block;position:relative;width:300px;height:164px;margin:0px auto 0px;">
        <ul class="amazingaudioplayer-audios" style="display:none;">

        <li data-artist=?????? data-image="audios/space.jpg" data-live="true">
                <div class="amazingaudioplayer-source" data-src="http://music:8005/mp3.mp3" data-type="audio/mpeg" />
            </li>
        </ul>
    </div>
    <!-- End of body section HTML codes -->

</div>
</body>

这是javascript＆＃34; track_name＆＃34;功能：

<div id="track_name"></div> 
                <script type="text/javascript">
        function UpdateTitle()
        { 
            var xmlhttp;
            //get "track name" block
            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)
                {
                    var s = xmlhttp.responseText;
                    document.getElementById('track_name').innerHTML = s;
                }
            }
            //use random number in request to prevent caching
            var rand_no = Math.random();
            rand_no = rand_no * 100;
            //read the "temp_title.txt" file
            xmlhttp.open("POST", "/radio/temp_title.txt?"+rand_no, true);
            xmlhttp.send();     
        }   
        //
        setInterval("UpdateTitle()", 1000);
        UpdateTitle();
    </script>

Answer 1

也许......

var trackNmae = "track_name";
document.getElementsByTag("li")[0].setAttribute("data-artist", trackName);

这只会影响第一个<li>代码。

如果标签有ID，您可以将其更改为...

HTML：

<li id="ID1" data-artist="PLACE" data-image="audios/test.jpg" data-live="true">

使用Javascript：

document.getElementById("ID1").setAttribute("data-artist", trackName);

<强>更新：

根据评论，这是我理解的尝试。试试......

document.getElementById('track_name').innerHTML = s;
document.getElementsByTag("li")[0].setAttribute("data-artist", s);

更新2 ：

更改此代码，如图所示......

xmlhttp.onreadystatechange = function()
{
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
    {
        var s = xmlhttp.responseText;
        document.getElementById('track_name').innerHTML = s;
        document.getElementsByTag("li")[0].setAttribute("data-artist", s); // CHANGE HERE!
    }
}

Answer 2

最近，我也搜索了相同的内容，但找不到简单的可行解决方案，因此我创建了一个解决方案。

HTML部分：

<div class="table-container">
  <ul class="data-list">

  </ul>
</div>

JAVA脚本：

const dataListRef = document.querySelector(".data-list");

//list item
var list = ["first", "second", "third"];

//render list item
var ul = document.querySelector("data-list");

list.forEach(item => {
  var li = document.createElement("li");
  li.innerText = item;
  dataListRef.appendChild(li);
});

一些CSS使其看起来更好：

.table-container{
  width: 60%;
  margin:auto;
}
ul li{
  list-style: none;
  margin: 10px;
  background-color: #454545;
  padding: 10px;
  color: #fff;
}

可以找到有效的解决方案here codepen link

在LI中插入javascript DIV

2 个答案: