javascriptでHTML要素を作成してデータベースMySqlに保存する方法

Question

作成した要素をデータベースに保存しようとしています。だから私はページを更新したときに、作成された要素はまだページ上に残っています。助けてください、ありがとう。

document.getElementById("insert").onclick = function(){ 
 
    if(document.getElementById('number').value !== ""){ 
 
\t var a = document.createElement('a'); \t \t \t   
 
    a.className = "button fit icon fa-warning"; 
 
\t a.href = "tel:" + document.getElementById('number').value; \t \t var c = document.getElementById('nama').value; 
 
\t a.innerHTML = c; 
 
\t \t \t \t \t \t 
 
\t var container = document.getElementById('linkcontainer'); 
 
\t container.appendChild(a); \t \t \t 
 
    } \t \t \t 
 
} \t \t \t

<input type="text" name="nama" id="nama" value="" placeholder="Input Name" required> 
 
<input type="text" name="number" id="number" value="" placeholder="Input Number" required> 
 
<button name="insert" id="insert" class="button">Add Number</button> 
 
<div id="linkcontainer"></div>

Answer 1

あり、それを行うには複数の方法がありますが、それをデータベースに保存すると、そのうちの一つではありません。新しい要素を挿入するためのJavaScriptコード全体をシリアライズしたり、DOMの追加部分をデータベースに挿入することはお勧めしません。

代わりに、XMLまたはJSON構成ファイルに保存し、サーバー側に保存します。すべてのクライアントとサーバーとのやりとりで、つまり、サーバーへの呼び出しでDOM要素を示す新しいリクエストパラメータを送信すると、その要素は親要素であり、値であり、クラスであり、IDであり、その他すべての必要な属性です。この情報を解析して、設定ファイルに保存します。このページが読み込まれるたびに、設定ファイルを読み、HTML DOMを変更してください。

データベースに保存する場合は、リレーショナルデータベースを選択し、serial_no、parent_id、attributes（パイプで区切られたキー値の属性と値のペア）属性を持つリレーションを作成してください。バックエンドスクリプトに対するすべての要求に対して、新しい情報をデータベースに保存するためにクエリを実行します（プリペアドステートメントのみを使用します）。このデータを読み込み、HTML DOMに追加してください。

希望すると便利です。