javascriptを使用して新しい要素を追加した後でローカルのhtmlファイルを更新するにはどうすればよいですか？

私はWeb開発を初めて利用しています。リスト項目を未分類リストに追加しようとしています。私は成功し、リストに項目を追加javascriptを使用して新しい要素を追加した後でローカルのhtmlファイルを更新するにはどうすればよいですか？

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); 
}

item.js

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.css 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を使用しました。しかし、ページを更新すると、すべてのアイテムが消えてしまいます。

アイテムを追加した後、htmlファイルを保存したり、htmlファイルを更新したりすると、ページリストアイテムがリフレッシュされるようにするにはどうすればよいですか。

出典

2016-03-23 MaxySpark

。あなたはそれを行うためにサーバサイドの言語を使用する必要があります。現在のブラウザ用に保存する場合は、ローカルストレージを使用できます。 – epascarello

あなたは私にこれをPHPで表示できますか？ – MaxySpark

<li>要素のテキストをローカルストレージに保存し、本文のloadイベントを取得することができます。セキュリティ上の理由からスニペットは機能しませんが、Sublime Textで試してみました。クライアント側のJavaScriptは、サーバー上のファイルを保存することはできません

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>

出典

2016-03-23 19:32:03

その機能していない！ – MaxySpark

javascriptを使用して新しい要素を追加した後でローカルのhtmlファイルを更新するにはどうすればよいですか？

答えて

関連する問題