使用js將選定的<li>復制到另一個<ul>-有解無憂

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。我還需要從 li 中洗掉類 'selectedli'，然后再將它添加到 ul 'slottable'。

uj5u.com熱心網友回復：

它是通過在內部創建動態標簽來完成的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>

uj5u.com熱心網友回復：

該appendChild()方法應該有效。

像這樣：

sortable2.appendChild(selectedli)

要洗掉類，請使用 selectedli.classList.remove(selectedli)

uj5u.com熱心網友回復：

你在尋找這樣的東西嗎？它從一個 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/384944.html

標籤：javascript html

上一篇：不能超過類外變數的值

下一篇：如何通過lodash從內部物件中洗掉一個鍵