title: When click event, the element is added and disappears immediately
body: <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Question&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;form action=""&gt;
          &lt;input type="text" id="more-item" placeholder="addSomething" required autocomplete="off"&gt;
          &lt;button id="more"&gt;add&lt;/button&gt;
      &lt;/form&gt;
      &lt;ul id="items"&gt;
          &lt;li class="item"&gt;work&lt;/li&gt;
          &lt;li class="item"&gt;relax&lt;/li&gt;
          &lt;li class="item"&gt;game&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <pre><code>
  $('#more').on('click', function() {
  const item = $('#more-item').val();
    if (item !== '') {
      $('#items').append('&lt;li class="item"&gt;' + String(item) + '&lt;/li&gt;');
    } 
  });
  </code></pre>
  
  <p><a href="https://jsfiddle.net/mj70Lzey/" rel="nofollow noreferrer">https://jsfiddle.net/mj70Lzey/</a></p>
  
  <p>When I add the li tag, it is added and immediately disappears from the screen, resulting in a 404 error. What is the reason?</p>