如何在使用javascript添加新元素后更新本地html文件

How can I update local html file after adding new element using javascript?

本文关键字：元素 更新 文件 html javascript 新元素 添加      更新时间：2023-09-26

我是web开发的新手。我正在尝试将列表项添加到未排序的列表中。使用javascript

html

<!DOCTYPE html>
<html>
<head>
    <title>Item Add Test</title>
    <script src="item.js"></script>
    <link rel="stylesheet" type="text/css" href="item.css">
</head>
<body>
<input type="text" id="initem"></input>
<br /><br />
<button onclick="myFunction1()" id="submit">SUBMIT</button>
<ul id="menu">
    <li>ABC</li>
    <li>BLA</li>
</ul>
</body>
</html>

css项.css

body {
    font-family: monospace;
    text-align: center;
    font-size: 1.5em;
}
input {
    text-align: center;
    width: 300px;
    height: 30px;
    border: 1px solid blue;
    border-radius: 5px;
    margin: 10px auto;
    padding-left: 10px;
    font-size: 1.2em;
    font-weight: bold;
}
#submit {
    font-size: 1em;
}

javascript item.js

function myFunction1() {
    var name = document.getElementById("initem").value;
    var node = document.createElement("LI");
    var textnode = document.createTextNode(name);
    node.appendChild(textnode);
    document.getElementById("menu").appendChild(node);
}

我已成功将项目添加到列表中。但当我刷新页面时，所有项目都不见了。

如何在添加项目后保存html文件或更新html文件，以便在刷新页面列表时项目仍保留在那里。

您可以将<li>元素的文本保存在本地存储中，并检索主体的load事件。出于安全原因，这个片段不起作用，但我尝试了Sublime Text，它很好。

var li_texts = [];
function myFunction1() {
    var name = document.getElementById("initem").value;
    var node = document.createElement("LI");
    var text = 'Test';
    node.innerHTML = text;
    document.getElementById("menu").appendChild(node);
    li_texts.push(text);
    localStorage.setItem("li_texts", JSON.stringify(li_texts));
    
}
function loadList(){
  
  if (localStorage.getItem("li_texts") !== null) {
    var stored_names = JSON.parse(localStorage.getItem("li_texts"));
    
    for(i=0; i<stored_names.length; i++){
      var node = document.createElement("LI");
      node.innerHTML = stored_names[i];
      document.getElementById("menu").appendChild(node);
  
    }
  }
  else{
    return;
  }
}
body {
    font-family: monospace;
    text-align: center;
    font-size: 1.5em;
}
input {
    text-align: center;
    width: 300px;
    height: 30px;
    border: 1px solid blue;
    border-radius: 5px;
    margin: 10px auto;
    padding-left: 10px;
    font-size: 1.2em;
    font-weight: bold;
}
#submit {
    font-size: 1em;
}
<!DOCTYPE html>
<html>
<head>
    <title>Item Add Test</title>
    <script src="item.js"></script>
    <link rel="stylesheet" type="text/css" href="item.css">
</head>
<body onload="loadList()">
  <input type="text" id="initem"></input>
  <br /><br />
  <button onclick="myFunction1()" id="submit">SUBMIT</button>
  <ul id="menu">
    <li>ABC</li>
    <li>BLA</li>
  </ul>
</body>
</html>

相关文章：