需要串列將新元素添加到串列頂部-有解無憂

我有點卡住了。我想到了使用 .insertBefore() 的想法，但我不確定在哪里放置語法。我還需要添加復選框而不是使用時自動出現的專案符號，我不知道必須這樣做。我的代碼如下。HTML

const n = [];

function changeText() {
  inputText = document.getElementById('inputText').value;
  n.push(inputText);

  document.querySelector('#list ul').innerHTML  = "<li>"   inputText 
}

<html lang="en">
    <head>
        <title>To-Do list</title>
        <mmeta charset="UTF-8">
        <link rel="stylesheet" href="todoStyle.css">
    </head>
    <body>
        <div id="form">
            <h1>New Task</h1>
            <div id="button">
                <button onclick="changeText()">Add to list</button>
            </div>
            <div id="input">
                <input type="text" id="inputText" name="addNewList">
            </div>
        </div>
        <div class="list1" id="list">
            <h1>My to-do list</h1>
            <ul>
            </ul>
        </div>
        <script src="todo.js"></script>
    </body>
</html>

我嘗試在新的 document.getElementById 中插入 .insertBefore()。但是我不確定在哪里插入這行代碼。

uj5u.com熱心網友回復：

要將元素添加到陣列的開頭，只需 array.unshift(element) 而不是 .push

并為每個陣列項放置一個復選框：

<li><input type="checkbox"/></li>

uj5u.com熱心網友回復：

一種方法是首先保存當前內容。然后，您將按照您希望的順序將新專案與當前內容連接起來。我修改了代碼以像這樣作業

const n = [];

function changeText() {
  inputText = document.getElementById('inputText').value;
  // add the item in the beginning of the list
  n.unshift(inputText);

  // save current listing
  const currentContent = document.querySelector('#list ul').innerHTML;

  // append new item in the beginning the the current listing
  document.querySelector('#list ul').innerHTML = "<li>"   inputText   "</li>"   currentContent;
}

<html lang="en">
    <head>
        <title>To-Do list</title>
        <mmeta charset="UTF-8">
        <link rel="stylesheet" href="todoStyle.css">
    </head>
    <body>
        <div id="form">
            <h1>New Task</h1>
            <div id="button">
                <button onclick="changeText()">Add to list</button>
            </div>
            <div id="input">
                <input type="text" id="inputText" name="addNewList">
            </div>
        </div>
        <div class="list1" id="list">
            <h1>My to-do list</h1>
            <ul>
            </ul>
        </div>
        <script src="todo.js"></script>
    </body>
</html>

uj5u.com熱心網友回復：

嘗試使用afterbegin，我使用 css 洗掉串列樣式的圓圈并有一個帶有文本的復選框，現在您應該有一些事件供輸入處理。

const n = [];

function changeText() {
  inputText = document.getElementById('inputText').value;
  n.push(inputText)
  // get reference to the nav tag
  const listUl = document.querySelector("#list ul");
  listUl.insertAdjacentHTML("afterbegin", `
  <li>
    <input type="checkbox"/>  
    ${inputText}
  </li>
  `);
}

#list ul li{
  list-style:none;
}

<html lang="en">
    <head>
        <title>To-Do list</title>
        <mmeta charset="UTF-8">
        <link rel="stylesheet" href="todoStyle.css">
    </head>
    <body>
        <div id="form">
            <h1>New Task</h1>
            <div id="button">
                <button onclick="changeText()">Add to list</button>
            </div>
            <div id="input">
                <input type="text" id="inputText" name="addNewList">
            </div>
        </div>
        <div class="list1" id="list">
            <h1>My to-do list</h1>
            <ul>
            </ul>
        </div>
        <script src="todo.js"></script>
    </body>
</html>

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

標籤：javascripthtml列表

上一篇：在螢屏上只顯示一個值的問題

下一篇：如何遍歷字典串列并將具有相同“名稱”和“學校”的那些提取到一個新串列中，同時在其中獲取其他值