zoukankan      html  css  js  c++  java
  • jquery添加元素 .append()与.prepend()方法使用

    1.   append() 在结尾处添加元素

    <!DOCTYPE html>
    <html>
    	<head>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    		<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    		<script>
    			$(function(){
    				$("#btn1").click(function(){
    					$("p").append("<b>Append text</b>.");
    				});
    				$("#btn2").click(function(){
    					$("ol").append("<li>Append item.</li>")
    				})
    			});
    		</script>
    	</head>
    	<body>
    		<p>This is a paragraph.</p>
    		<p>This is another paragraph.</p>
    		<ol>
    			<li>List item1</li>
    			<li>List item2</li>
    			<li>List item3</li>
    		</ol>
    		<button id="btn1">追加文本</button>
    		<button id="btn2">追加列表项</button>
    	</body>
    </html>
    

     2.  prepend()在前面加入

    <!DOCTYPE html>
    <html>
    	<head>
    		<title></title>
    		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    		<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
    		<script>
    			$(function(){
    				$("#btn1").click(function(){
    					$("p").append("<b>Append text</b>.");
    				});
    				$("#btn2").click(function(){
    					$("ol").append("<li>Append item.</li>");
    				});
    				$("#btn3").click(function(){
    					$("p").prepend("<b>prepend text</b>");
    				});
    				$("#btn4").click(function(){
    					$("ol").prepend("<li>prepend text.</li>")
    				})
    			});
    		</script>
    	</head>
    	<body>
    		<p>This is a paragraph.</p>
    		<p>This is another paragraph.</p>
    		<ol>
    			<li>List item1</li>
    			<li>List item2</li>
    			<li>List item3</li>
    		</ol>
    		<button id="btn1">追加文本</button>
    		<button id="btn2">追加列表项</button>
    		<button id="btn3">在前面加入文本</button>
    		<button id="btn4">在前面列表项</button>
    	</body>
    </html>
    

      

     

  • 相关阅读:
    用户可以设置每页显示记录数的分页程序
    将分页程序写成函数
    对查询结果进行分页
    使用mysql_query()方法操纵数据库以及综合实例
    php访问数据库
    cookie记录用户的浏览商品的路径
    php中如何输出当前服务器的(中国)当前时间
    mysql 与 mysqli的区别
    Django框架 之 ORM中介模型
    Django框架 之 查询 Extra
  • 原文地址:https://www.cnblogs.com/Alexander11/p/4948049.html
Copyright © 2011-2022 走看看