js中的onclick事件在ul获取li时点击两次才会执行的原因下面的代码中 只有onclick第二次才会执行函数内部的代码 代码实例如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js点击事件</title> <script type="text/javascript" src="jquery.js"></script> </head> <body> <ul id="mylist1"> <li>我喜欢吃</li> </ul> <ul id="mylist2"> <li>鸡腿</li> <li>薯片</li> <li>汉堡</li> </ul> <button id="btn" class="btn1">添加</button> <script> window.onload = function(){var oBtn = document.getElementById('btn'); oBtn.onclick = function(){var oUl1 = document.getElementById('mylist1'); var oUl2 = document.getElementById('mylist2'); oUl1.appendChild(oUl2.firstChild); }} </script> </body> </html> 出现此问题的原因是 firstChild 获得的是元素的第一个子元素 ul中的第一个子元素并不是第一个li标签 而是ul与第一个li之间的空格 解决的办法 1、将ul与li之间的空格全都删掉 2、使用children来调用li children[0]则是第一个li标签 下面的代码可以实现点击一次onclick 可以执行一次函数内部的代码 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js点击事件</title> <script type="text/javascript" src="jquery.js"></script> </head> <body> <ul id="mylist1"> <li>我喜欢吃</li> </ul> <ul id="mylist2"> <li>鸡腿</li> <li>薯片</li> <li>汉堡</li> </ul> <button id="btn" class="btn1">添加</button> <script> window.onload = function(){var oBtn = document.getElementById('btn'); oBtn.onclick = function(){var oUl1 = document.getElementById('mylist1'); var oUl2 = document.getElementById('mylist2'); oUl1.appendChild(oUl2.children[0]); }} </script> </body> </html>
注：也可以通过jQuery中的on()事件通过class属性调用click事件 可以使click事件在点击第一次时就会执行函数内部的代码
