将现有的项目列表附加到新列表
Posted
技术标签:
【中文标题】将现有的项目列表附加到新列表【英文标题】：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 首歌曲？ 【参考方案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 如果这回答了您的问题，您应该将其标记为已接受（请参阅***.com/help/someone-answers）。以上是关于将现有的项目列表附加到新列表的主要内容，如果未能解决你的问题，请参考以下文章