使用JavaScript将项永久追加到ul元素

Question

我有一些div，这是一个类似仪表板的网站，所以我需要每天更新它。我可以手动编辑HTML和所有的东西，但那是你know...inefficient。

每个div都有一个ul元素，每天我都需要添加一些li元素。

我尝试过一个附加JavaScript元素的li函数，我也会将它添加到代码片段中。但是，这仍然是暂时的，因为如果我删除js文件中的代码行，添加的li元素也会消失。因此，我正在寻找一种将li元素永久添加到无序列表中的方法，当它们真的老了之后，最好也能删除它们。

​

function append(ul, data) {
  try {
    ul.appendChild(document.createElement("li")).innerHTML = data;
  } catch (e) {
    console.error(e);
    console.log("error boi");
  }

}


append(document.getElementById("ul-1"), "door")

div {
  background-color: cyan;
  height: 300px;
  width: 500px;
}

<div id="1">
  div 1
  <br />
  <ul id="ul-1">
    <li>reeeeeeeee</li>
    <li>ramen ramen ramen ramen</li>
    <li>..........................</li>
    <!-- have to append few li items every day-->
  </ul>

</div>
<br>
<div id="2">
  div 2
  <br />
  <ul id="ul-2">
    <li>ok</li>
    <li>ravioli ravioli ravioli ravioli</li>
    <li>..........................</li>
  </ul>

</div>

​

Answer 1

我猜你可以用一个JSON文件来存储和检索数据，或者你可以用PHP获取和检索数据，但是你需要一个数据库，如果我没有错的话，使用JSON会更有效。(如果我错了，纠正我的错误)

请查看https://www.w3schools.com/whatis/whatis_json.asp#:~:text=JSON%20stands%20for%20JavaScript%20Object,describing%22%20and%20easy%20to%20understand希望下面的链接，这个答案帮助您。

Answer 2

注：↓：

这段代码只展示了一个示例，说明如何轻松地从列表中添加或删除items！

正如@Chris和@L.K-Kabilan所提到的，要存储数据，要么需要Database，要么需要Local Storage。但是，通过将数据存储在Local Storage中，您将面临丢失数据的风险，因为数据只存储在浏览器中的中。

​

// Get the elements
var input = document.getElementById('input');
var btn = document.getElementById('btn');
var select = document.getElementById('select');
var selected = select.options[select.selectedIndex].value;

// Delete the item of the clicked 'X' icon
function delLi(){
    var del = document.querySelectorAll('li span');
    for (var i = 0; i < del.length; i++){
        del[i].addEventListener('click', (e) => {
            e.target.parentElement.remove();
        });
    }
}

// Get the selected option
select.addEventListener('change', () => {
    selected = select.options[select.selectedIndex].value;
});

// Wrap the input value in an item and append it to the selected list
btn.addEventListener('click', (e) => {
    var val = input.value;
    if(val == '' || val.length <= 0){
        e.preventDefault();
    } else {
         var li = `<li><span>&times;</span><p>${val}</p></li>`;
        document.getElementById(selected).innerHTML += li;
        delLi();
    }
});

delLi();

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.wrapper {
    background-color: aqua;
    width: 500px;
    margin: 50px auto;
    border-radius: 5px;
    padding: 10px;
}
ul {
    list-style-type: none;
    line-height: 1.5;
}
ul::before {
    content: attr(aria-label);
    font-weight: bold;
    font-size: 20px;
}
li {
    display: flex;
    align-items: center;
}
li span {
    font-size: 18px;
    font-weight: bold;
    margin-right: 10px;
    cursor: pointer;
}
form {
    margin: 0 auto;
    width: 500px;
    background-color: rgb(233, 208, 17);
    padding: 10px;
}
#input {
    height: 30px;
    width: 100%;
    border-radius: 5px;
    border: none;
    padding: 0 10px;
    display: block;
    margin-bottom: 10px;
}
#btn {
    width: 100px;
    height: 34px;
    background-color: green;
    color: white;
    border: none;
    border-radius: 5px;
    display: inline-block;
    cursor: pointer;
}

<main>
    <div class="wrapper" id="wrapper-1">
        <ul id="ul-1" aria-label="List 1">
            <li><span>&times;</span><p>Item 1</p></li>
            <li><span>&times;</span><p>Item 2</p></li>
            <li><span>&times;</span><p>Item 3</p></li>
            <li><span>&times;</span><p>Item 4</p></li>
        </ul>
    </div>

    <div class="wrapper" id="wrapper-2">
        <ul id="ul-2" aria-label="List 2">
            <li><span>&times;</span><p>Item 1</p></li>
            <li><span>&times;</span><p>Item 2</p></li>
        </ul>
    </div>

    <form action="">
        <input id="input" type="text">
        <select name="" id="select">
            <option value="ul-1">List 1</option>
            <option value="ul-2">List 2</option>
        </select>
        <input id="btn" type="button" value="Submit">
    </form>
</main>

​