<li> <ul> 使用 js 将所选内容复制到另一个

function addSelected(clicked_id) {
// alert(clicked_id);
const ul = document.getElementById("sortable2");
const listItems = ul.getElementsByTagName("li");
//   const ul2 = document.getElementById('slottable1');
// Loop through the NodeList object.
for (let i = 0; i <= listItems.length - 1; i++) {
if (listItems[i].className == "selectedli") console.log(listItems[i]);
//need to copy these <li> tags in another <ul> list
}
}
<ul id="slottable">
//need to copy selected <li> here and also remove class from those selected <li> before adding here
</ul>

控制台输出：

<li id="pc_103" class="selectedli">B73</li>
<li id="pc_104" class="selectedli">B74</li>

我已经成功地打印了li，我想在控制台日志中将其复制到另一个ul，但无法找到正确的代码将其复制到我的另一个ul。在将类"selectedli"添加到ul"slottable"之前，我还需要从li中删除该类。

这是通过在slottable中创建动态标记来完成的。

参见以下示例：

const getChild = document.getElementById("sortable2").children;
function addSelected() {
let createUl = document.createElement("ul");
createUl.id = "slottable";
document.getElementById("tagBox").appendChild(createUl);

for (let i = 0; i < getChild.length; i++) {
if (getChild[i].className == "selectedli")
{
var createLi = document.createElement("li");
createLi.id = getChild[i].id
createLi.classList.add(getChild[i].classList);
createLi.innerHTML = getChild[i].textContent;

createUl.appendChild(createLi);
console.log(getChild[i]);
}
}
document.getElementById("sortable2").innerHTML = "";
}

ul
{
list-style: none;
}
#sortable2
{
padding: 10px;
background: red;
width: 30px;
}

#slottable
{
padding: 10px;
background: green;
width: 30px;
}

<body>
<div id="tagBox">
</div>

<ul id="sortable2">
<li id="pc_103" class="selectedli">B73</li>
<li id="pc_104" class="selectedli">B74</li> 
</ul>

<input type="button" onclick="addSelected()" value="submit">
</body>

appendChild()方法应该可以工作。

像这样：

sortable2.appendChild(selectedli)

要删除类，请使用selectedli.classList.remove(selectedli)

你在找这样的东西吗？它从一个ul复制到新的ul并删除类。

classList.remove和appendChild:

lis.map((el) => {    
el.classList.remove('selectedli');
el.innerText += ' (copied and without classs slectedli)'
ul2.appendChild(el)
})

const btn = document.getElementById('transfer');
btn.addEventListener('click', () => {
// copy from slottable to sortable2
const ul = document.getElementById("slottable").children;
const ul2 = document.getElementById("sortable2");    
let lis = Object.values(ul);

lis.map((el) => {    
el.classList.remove('selectedli');
el.innerText += ' (copied and without classs slectedli)'
ul2.appendChild(el)
})  
ul.innerHTML = '';  
});

.green {
background: green;
}
.gray {
background: gray;
}

<ul id="slottable" class="gray">
<li id="pc_103" class="selectedli">B73</li>
<li id="pc_104" class="selectedli">B74</li>
</ul>
<ul id="sortable2" class="green"></ul>
<button id="transfer">click </button>

相关内容

最新更新

热门标签：