title: how to prevent newly created elements by javascript to disappear when is refreshed?
body: <p>Actually i am making list ... first i get the user info and store it into mysql database . when user clicks 'add' button a new element of list appears in the bottom of list as the part of list which is already coded in html. Now the problem is when i refresh the page the the new created element of list disappears ? Any suggestions?</p>
  
  <pre><code>&lt;html&gt;
                    &lt;ul id="list" class="list-group" style="margin-top:20vh ;opacity:0.3;"&gt;
                          &lt;a href="#"  class="list-group-item list-group-item-action active" id="myBtn"&gt;&lt;span class="badge badge-primary badge-pill"&gt;+&lt;/span&gt;Add shop&lt;/a&gt;
  
                          &lt;a href="#" onclick="location.href='action.php';" class="list-group-item list-group-item-action" id="bg" &gt;Emporium&lt;/a&gt;
                      &lt;/ul&gt;
    &lt;/html&gt;  
  &lt;script&gt;
  function newuser() {
          var ul = document.getElementById("list");
          var li = document.createElement("a");
          li.appendChild(document.createTextNode("&lt;?php echo $row3['shopname'] ?&gt;"));
  
          li.setAttribute("id", "bg"); // added line
          li.setAttribute("class", "list-group-item list-group-item-action");
          li.setAttribute("href", "#");
          //    li.insertBefore(li, ul.children[0]);
          ul.appendChild(li);
  
      }
  &lt;/script&gt;
  </code></pre>