Question

您好我正在尝试创建动态

但是一段时间后它会消失，请帮忙。我正在点击搜索按钮执行此任务。请参阅下面的代码。

<!DOCTYPE HTML>
<html>
<head>    
     <script>
      function handleClick()
      {
        var ul = document.getElementById("list");    
        for (var i=0; i<5; i++){    
            var li=document.createElement('li');    
            ul.appendChild(li);
            li.innerHTML=li.innerHTML + "ABC";    
        }
      }
     </script>
</head>
<body>    
    <section class="webdesigntuts-workshop">
        <form action="" method="" name="myform" onSubmit="handleClick()">   
            <!--<input name="Submit"  type="submit" value="Update" />   -->
            <input name="Submit" type="search" placeholder="Search...">      
            <button>Search</button>
        </form>
        <div>
            <ul id="list">
            </ul>
        </div>
    </section>
</body>
</html>

Answer 1

试试这个

<section class="webdesigntuts-workshop">
    <form action="javascript:handleClick()" method="post" name="myform">
        <!--<input name="Submit" type="submit" value="Update" />-->
        <input name="Submit" type="search" placeholder="Search...">
        <button>Search</button>
    </form>
    <div>
        <ul id="list"></ul>
    </div>
</section>

DEMO

Answer 2

问题是您正在使用input type='submit'并且正在发送帖子请求。

使用input type='button'，您的问题就会得到解决。

Answer 3

因为单击后提交表单。为防止这种情况，您可以返回false：

onSubmit="return handleClick()"

      function handleClick()
      {
        var ul = document.getElementById("list");    
        for (var i=0; i<5; i++){    
            var li=document.createElement('li');    
            ul.appendChild(li);
            li.innerHTML=li.innerHTML + "ABC";    
        }
          return false;
      }

或传递事件并致电preventDefault：

onSubmit="handleClick(event)"

      function handleClick(e)
      {
          e.preventDefault();
        var ul = document.getElementById("list");    
        for (var i=0; i<5; i++){    
            var li=document.createElement('li');    
            ul.appendChild(li);
            li.innerHTML=li.innerHTML + "ABC";    
        }
      }

Answer 4

  <section class="webdesigntuts-workshop">
    <form action="" method="" name="myform" >
        <input  name="Submit" type="search" placeholder="Search...">
        <input  type="button" name="Search" value="Search" onClick="handleClick()"/>
 </form>
<div>
    <ul id="list"></ul>
</div>
 </section>
 check This one its working fine.

动态html列表元素动态

4 个答案: