zoukankan      html  css  js  c++  java
  • 动态创建2016/4/21

    <!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>
    

      

  • 相关阅读:
    Redis 设计与实现 2:Redis 对象 redisObject
    Redis 设计与实现 1:数据库 redisDb
    KafkaProducer 简析
    G1 收集器
    KafkaMirrorMaker 的不足以及一些改进
    Redis 数据结构与对象编码 (Object Encoding)
    跨境 TCP 传输优化实录 — 使用 BBR 解决 LFN 问题
    TCP 协议简析
    使用模拟退火算法优化 Hash 函数
    LSM-Tree 与 B-Tree
  • 原文地址:https://www.cnblogs.com/hduhdc/p/5415729.html
Copyright © 2011-2022 走看看