在 LI 中插入 JavaScript DIV

Insert javascript DIV in LI

本文关键字：JavaScript DIV 插入 LI      更新时间：2023-09-26

我有一个免费的HTML5收音机播放器，我需要从工作的JavaScript中添加歌曲标题：

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

（"track_name"由Java脚本函数生成，工作正常。印刷："阿爸 - 新年快乐"

我想在HTML5播放器中插入"track_name"，在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 页面中。

感谢您的任何帮助！

更新，完成代码：

这是索引.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"track_name"函数：

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

也许...

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!
    }
}

最近我也搜索了同样的东西，但找不到一个简单的工作解决方案，所以我创建了一个。

网页部分：

<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;
}

可以在此处找到工作解决方案 代码笔链接

相关文章：