将现有的项目列表附加到新列表答案

【问题标题】：Append the existing list of items to a new list将现有的项目列表附加到新列表
【发布时间】：2021-08-01 19:44:58
【问题描述】：

document.getElementById('add').addEventListener('click',function(e){
e.preventDefault();
// getting the list
var list=document.getElementById('playlist');
// getting the value from form
var text=document.getElementById('title').value;
// creating the new list item
var newTag =document.createElement('li');
// setting the class to list item
newTag.setAttribute('class','list-group-item');
// appending the list item value that is got from the form
newTag.appendChild(document.createTextNode(text));
// adding the list item to the list
list.appendChild(newTag)
// console.log(newTag)
});
var list=document.getElementById('playlist');
list.addEventListener('click', remove);
function remove(e){
    if(e.target.classList.contains('delete')){
        var li=e.target.parentElement;
        list.removeChild(li)
    }
}
let addbtn=document.getElementById('addtoplayer');
addbtn.addEventListener('click',addtoplayer)
function addtoplayer(){
    let getUi=document.getElementById('playlist');
    getUi=document.getChildNodes;
    console.log(getUi)
}

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Js Test</title>
<link rel="STYLESHEET" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
    </head>
    <body>
        <form action="" id="add-data" class="m-4">
            <input type="text" id="title" class="form-control m-2">
            <input type="submit" value="Add" class="btn btn-primary m-2" id="add">
        </form>
        <div class="container">
            <div class="card shadow">
                <div class="card-header text-center bg-light">
                    <h2><small>Playlist</small></h2>
                </div>
                <div class="card-body p-0">
                    <ul id="playlist" class="list-group">
                        <li class="list-group-item" data-name="song title" data-artits="artist name" data-path="path-to-song.mp3" data-pic="cover.jpg">song 1<span class="badge badge-danger float-right delete" data-id="1" id="remove">X</span></li>
                        <li class="list-group-item" data-name="song title" data-artits="artist name" data-path="path-to-song.mp3" data-pic="cover.jpg">song 2<span class="badge badge-danger float-right delete" data-id="2" id="remove">X</span></li>
                        <li class="list-group-item" data-name="song title" data-artits="artist name" data-path="path-to-song.mp3" data-pic="cover.jpg">song 3<span class="badge badge-danger float-right delete" data-id="3" id="remove">X</span></li>
                        <li class="list-group-item" data-name="song title" data-artits="artist name" data-path="path-to-song.mp3" data-pic="cover.jpg">song 4<span class="badge badge-danger float-right delete" data-id="4" id="remove">X</span></li>
                        
                    </ul>
                </div>
            </div>
           <button id="addtoplayer" class="btn btn-dark btn-block my-4">Add to player</button>
            <div id="player"></div>
        </div>
        <script src="main.js"></script>
    </body>
    </html>

[这是我试过的代码笔][1]

所以，我想做的是以下几点：

我有一个歌曲列表：我想要做的是，当我点击添加到播放列表时，我想将列表中的 4 首歌曲添加到播放器的播放列表中。

我想使用纯 JavaScript，而不是 jQuery。

【问题讨论】：

这能回答你的问题吗？ how to add new <li> to <ul> onclick with javascript
您想以哪种形式添加它们 - 作为 li 标签、锚标签或其他？
@FlorianCastelain nope 没有回答我的问题
@biberman 作为 li 标签
您想要添加到播放列表中的是第 4 首歌曲还是全部 4 首歌曲？

标签： javascript html

【解决方案1】：

您可以通过cloneNode(true) 和append() 实现此目的。在您的点击事件处理程序中创建一个无序列表，遍历所有 li 标签，用于克隆并将它们附加到新列表并将该列表附加到播放列表 div。

工作示例：

document.querySelector('#addtoplayer').addEventListener('click', function() {
  let songs = document.querySelectorAll('#playlist li');
  let songlist = document.createElement('ul');
  for (i = 0; i < songs.length; i++) {
    let song = songs[i].cloneNode(true);
    songlist.append(song);
  }
  document.querySelector('#player').append(songlist);
});

<ul id="playlist">
  <li data-name="song title" data-artits="artist name" data-path="path-to-song.mp3" data-pic="cover.jpg">song 1</li>
  <li data-name="song title" data-artits="artist name" data-path="path-to-song.mp3" data-pic="cover.jpg">song 2</li>
  <li data-name="song title" data-artits="artist name" data-path="path-to-song.mp3" data-pic="cover.jpg">song 3</li>
  <li data-name="song title" data-artits="artist name" data-path="path-to-song.mp3" data-pic="cover.jpg">song 4</li>
</ul>
<button id="addtoplayer" class="btn">Add to playlist</button>
<div id="player"></div>

如果您想在将歌曲添加到播放器后清空播放列表，您可以使用remove() 删除播放列表项。

工作示例：

document.querySelector('#addtoplayer').addEventListener('click', function() {
    let songs = document.querySelectorAll('#playlist li');
    let songlist = document.createElement('ul');
    for (i = 0; i < songs.length; i++) {
        let song = songs[i].cloneNode(true);
        songlist.append(song);
        songs[i].remove();
    }
    document.querySelector('#player').append(songlist);
});

<ul id="playlist">
  <li data-name="song title" data-artits="artist name" data-path="path-to-song.mp3" data-pic="cover.jpg">song 1</li>
  <li data-name="song title" data-artits="artist name" data-path="path-to-song.mp3" data-pic="cover.jpg">song 2</li>
  <li data-name="song title" data-artits="artist name" data-path="path-to-song.mp3" data-pic="cover.jpg">song 3</li>
  <li data-name="song title" data-artits="artist name" data-path="path-to-song.mp3" data-pic="cover.jpg">song 4</li>
</ul>
<button id="addtoplayer" class="btn">Add to playlist</button>
<div id="player"></div>

【讨论】：

@aemeskay 如果这回答了您的问题，您应该将其标记为已接受（请参阅stackoverflow.com/help/someone-answers）。