Need the list to add new elements to the top of the list-CodePudding

I am kind of stuck. I have thought of the idea to use the .insertBefore() but I am not sure where to place the syntax. I also need to add checkboxes instead of the bullets that automaticly apear when using , I have no clue have to do this. My code is as follows. 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  id="list">
            <h1>My to-do list</h1>
            <ul>
            </ul>
        </div>
        <script src="todo.js"></script>
    </body>
</html>

I tried inserting the .insertBefore() in a new document.getElementById. But I was not sure where to insert this line of code.

CodePudding user response：

To add an element to the beginning of an array, just array.unshift(element) instead of .push

And for putting a checkbox per array item:

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

CodePudding user response：

One way to do it is to first save the current content. Then you will concatenate the new item with the current content, in the order you want it to be presented. I modified the code to work like that

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  id="list">
            <h1>My to-do list</h1>
            <ul>
            </ul>
        </div>
        <script src="todo.js"></script>
    </body>
</html>

CodePudding user response：

Try using afterbegin, I used css to remove the circle of the list styles and having a checkbox with the text, now you should have some events for the input to handle.

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  id="list">
            <h1>My to-do list</h1>
            <ul>
            </ul>
        </div>
        <script src="todo.js"></script>
    </body>
</html>