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

Question

我有几个 divs，它是一个仪表板网站，所以我需要每天更新它。我可以手动编辑 HTML 等等，但那是你知道的...效率低下。

每个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 会更有效率。（如果我错了请纠正我）
检查下面 link https://www.w3schools.com/whatis/whatis_json.asp#:~:text=JSON%20stands%20for%20JavaScript%20Object,describing%22%20and%20easy%20to%20understand 希望这个回答对你有帮助。

Answer 2

注↓：

这段代码只是展示了一个示例，说明如何 add 或 remove items 轻松地往返于列表！
作为 @Chris G 和 @L.K。 Kabilan 提到，要存储数据，您需要 Database 或 Local Storage。但是，通过将 data 存储在 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>

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

append items to ul element using JavaScript permanently

html

javascript

appendchild

注↓：