DOM动态创建元素有兼容性问题li a

最新推荐文章于 2022-08-22 22:14:19 发布

难瘦不难过

最新推荐文章于 2022-08-22 22:14:19 发布

阅读量224

点赞数

分类专栏： DOM

本文链接：https://blog.csdn.net/osweet12345678/article/details/52079115

版权

DOM 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function() {
   
   var oText = document.getElementById('text1');
   var oBtn = document.getElementById('btn');
   var oUl = document.getElementById('ul1');
   
   oBtn.onclick = function() {
      
      /*
         document.createElement(标签名称); 创建元素
      */
      
      var oLi = document.createElement('li');
      
      //oLi.innerHTML = oText.value + '<a href="javascript:;">删除</a>';
      oLi.innerHTML = oText.value;
      
      var oA = document.createElement('a');
      oA.innerHTML = '删除';
      oA.href = 'javascript:;';
      oA.onclick = function() {
         
         /*
            父级.removeChild(要删除的元素); 删除元素
         */
         
         oUl.removeChild( this.parentNode );
         
      }
      
      oLi.appendChild( oA );
      
      
      //添加到页面中
      /*
         父级.appendChild(要添加的元素) 方法 追加子元素
      */
      //oUl.appendChild( oLi );
      
      /*
         父级.insertBefore(新的元素，被插入的元素) 方法 在指定元素前面插入一个新元素
         在ie下如果第二个参数的节点不存在，会报错
         在其他标准浏览器下如果第二个参数的节点不存在，则会以appendChild的形式进行添加
      */
      //oUl.insertBefore( oLi, oUl.children[0] );
      
      if ( oUl.children[0] ) {
         oUl.insertBefore( oLi, oUl.children[0] );
      } else {
         oUl.appendChild( oLi );
      }
      
   }
   
}
</script>
</head>

<body>
   <input type="text" id="text1" /><input type="button" value="留言" id="btn" />
   <ul id="ul1"></ul>
</body>
</html>

难瘦不难过

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM动态创建元素有兼容性问题li a

HTML>http-equiv="Content-Type" content="text/html; charset=utf-8">无标题文档window.onload = function() { var oText = document.getElementById('text1'); var oBtn = document.getEl
复制链接

扫一扫