innerHTMLはHTML要素を永続的に追加しません

innerHTMLの動作を以下のコードで理解しようとしています。ボタンを押すたびに新しいdivブロックを恒久的に追加したいのですが、新しいブロックが1秒間だけポップアップして消えるようです。innerHTMLはHTML要素を永続的に追加しません

誰にこのような理由があり、どのように修正するのかを知っていますか？

また、innerHTMLの代わりにappendChildを使用するようにコードを変更すると、エラーが発生します。これはArgument 1 of Node.appendChild is not an object.です。私はこれが何を意味するのか分かりません。

ご協力いただきありがとうございます。以下は

はコードです：

<DOCTYPE html> 
<html> 
    <body> 
     <form onSubmit="loadData()"> 
      <input type="submit" id="button"> 
     </form> 

     <div id="block">List of items:</div> 

     <script> 
      function loadData(){ 
       document.getElementById("block").innerHTML += "<div>item</div>"; 
      // document.getElementById("block").appendChild("<div>item</div>"); 

      }; 

     </script> 
    </body> 
</html>

出典

2016-03-20 Dxml

あなたは再ロードを引き起こす送信ボタンを使用しています。通常のボタンを使用すると、この問題は発生しません。 –

そこで、入力タグをこの ''に置き換えます。ボタン「 – Dxml

」を押すと何も起こりそうにないのは、あなたのコードが「onSubmit」という項目を追加しているだけなのでです。私の解答とコメントを参照してください... –

あなたは、ページのリロードを提出すると、あなたのHTMLが抹消されているので。

アイテムを保持する必要がある場合は、cookie、localStorage、またはサーバー側のソリューションを使用する必要があります。

function addItem() 
 
{ 
 
    document.getElementById("block").innerHTML += "<div>item</div>"; 
 
}

<DOCTYPE html> 
 
    <html> 
 

 
    <body> 
 
    <form> 
 
     <input type="button" id="button" onclick="addItem()" /> 
 
    </form> 
 

 
    <div id="block">List of items:</div> 
 

 

 
    </body> 
 

 
    </html>

出典

2016-03-20 15:33:16

あなたはページを提出しています。 appendChildまたはinnerHtmlは、新しいページがロードされる前に、サブミットの直後に発生します。新しいページがロードされると、（変更が適用された）現在のページが破棄され、新しいページに置き換えられます。

新しいページで何かを実行したい場合は、そのページでコードを実行する必要があります。（またはフォーム送信を使用しないで、フォームを送信するためにいくつかのAjaxを使用します）。

appendChildがあなたのために働いていないのは、appendChildが文字列ではなくパラメータとしてdomノードを必要とするためです。 document.getElementById("foo).appendChild(document.createElement("div"))のようになります。（複雑な部分は、createElementで空の要素を取得した場合でも、必要なコンテンツを置く必要があります）

出典

2016-03-20 15:36:17

ありがとうマティアス！これは私には新しいものなので、フォームを送信するためにajaxを使用してみてください。上のケースでajaxを採用する方法を示すサンプルコードを私に教えてもらえますか？ – Dxml

最初の質問は既に@leeによって返されています 2番目の答えの問題は、あなたがやったようにあなたはは、appendChild使用できないことをuが子を追加使用したい場合は、mozilla developer docsに応じて、あなたがこのような何かを持っています。あなたが尋ねた結果を得るために

var mydiv = document.createElement("div"); 
mydiv.appendChild(document.createTextNode("item")); 
document.getElementById("block").appendChild(mydiv);

出典

2016-03-20 15:45:20

ありがとうございますsuits_at！ "item"というテキストを単に追加するのではなく、新しく作成したdivにいくつかの属性を追加したいとします。クラス、高さ、幅の属性、どのように私はこれを行うことができますか？ – Dxml

属性ノードも同じ方法で作成できます。コードの扱いを簡単にするため、私はあなたのために短いコードを作った。 https://codepen.io/suits_at/pen/WwppMy –

innerHTMLはHTML要素を永続的に追加しません

答えて

関連する問題