元素的创建

最新推荐文章于 2016-08-02 16:56:40 发布

难瘦不难过

最新推荐文章于 2016-08-02 16:56:40 发布

阅读量184

点赞数

分类专栏： DOM

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

版权

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>

难瘦不难过

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素的创建

无标题文档window.onload = function() { var oText = document.getElementById('text1'); var oBtn = document.getElementById('btn'); var oUl = document.getElementById('ul1'); oBtn.
复制链接

扫一扫

专栏目录