您的位置：首页 > Web前端 > JQuery

Jquery学习之旅之添加元素

2016-04-18 01:40 661 查看
    Jquery中的添加元素的方法有before(),after(),append(),prepend(),四种方法，before（） 在指定元素的前面添加元素，after()在指定元素的后面添加元素，而append在指定元素的末尾添加元素，而prepend,在指定元素的开始处添加元素，下面是代码

   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<style type="text/css">

*{

  font-size:24px;

  font-family: "微软雅黑";

}

.anii{width:100px;height:60px;background-color: red;position: absolute;}

</style>

</head>

<body>

<table>

<tr><th>one</th></tr>

</table>

<button id="append">append</button>

<button id="prepend">prepend</button>

<button id="before">before</button>

<button id="after">after</button>

<p>这是一个html</p>

 <script type="text/javascript" src="jquery/jquery-2.1.1.js"></script>

<script type="text/javascript" src="jquery/jquery-2.1.1.min.js"></script>

<script type="text/javascript">

 $(document).ready(

   function()

   { 

     $("#append").click(function(){$("table").append("<tr><th>two</th></tr>");});

     $("#prepend").click(function(){$("table").prepend("<tr><th>three</th></tr>");});

     $("#before").click(function(){$("table").before("<h1>这是在元素前面添加的</h1>");});

     $("#after").click(function(){$("table").after("<h1>这是在元素后面添加的</h1>");});

   }

 );

</script>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航