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>
    

      

     

  • 相关阅读:
    用来验证字符串的规则引擎
    C++基本错误:
    web service传递stream二进制对象的解决方法
    安装EnterpriseLibrary4.1后遇到PresentationBuildTasks找不到的问题
    关于NHibernate示例程序QuickStart无法运行的问题
    关于iframe.document
    .NET下转换日期格式为中文大写
    History(历史)命令用法 15 例
    防火墙技术发展趋势浅析
    MIME类型大全
  • 原文地址:https://www.cnblogs.com/Alexander11/p/4948049.html
Copyright © 2011-2022 走看看