我的第十四课:jQuery - 添加元素
来源:互联网 发布:广联达软件有哪些 编辑:程序博客网 时间:2024/04/30 15:11
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
代码如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript">
function appendText(){
var test1="<p>Text.</p>";//html创建新元素
var test2=$("<p></p>").text("Text.");//jquery创建新元素
var test3=document.createElement("p");//通过dom来创建文本
test3.innerHTML="Text.";
$("body").append(test1,test2,test3);//追加新元素
}
function afterText(){
var text1="<b>I</b>";
var text2=$("<i></i>").text("hete.");
var text3=document.createElement();
text3.innerHTML="you.";
$("img").after(text1,text2,text3);
}
$(document).ready(
function(){
$("#btn1").click(
function(){
$("p").append("<b>Append text</b>");
}
);
$("#btn2").click(
function(){
$("ol").append("<li>Append text</li>");
}
);
$("#btn3").click(
function(){
$("p").prepend("<b>Append text</b>");
}
);
$("#btn4").click(
function(){
$("ol").prepend("<li>Append text</li>");
}
);
$("#btn5").click(
function(){
$("img").before("<b>append<b>");
}
);
$("#btn6").click(
function(){
$("img").after("<b>append<b>");
}
);
}
);
</script>
</head>
<body>
<p>第一段</p>
<p>第二段</p>
<ol>
<li>标题一</li>
<li>标题二</li>
<li>标题三</li>
</ol>
<img alt="" src="image/1.jpg"/>
<button id="btn1">追加文本</button>
<button id="btn2">追加列项表</button>
<button id="btn3">前面追加文本</button>
<button id="btn4">前面追加列项表</button>
<button onclick="appendText()">追加整段文本</button>
<button id="btn5">图片前面追加文本</button>
<button id="btn6">图片后面追加文本</button>
<button onclick="afterText()">追加整段文本</button>
</body>
</html>
- 我的第十四课:jQuery - 添加元素
- 我的第十五课:jQuery - 删除元素
- jquery 添加元素的方法
- JQuery动态添加Select的Option元素
- jquery 动态生成的元素 添加事件
- jquery append添加的元素事件无效
- JQuery动态添加Select的Option元素
- jQuery动态添加的元素绑定事件
- jquery 动态添加元素的事件
- jQuery如何获取动态添加的元素
- JQuery DOM元素的删除和添加
- jquery的对象数组的添加元素,删除元素
- jQuery的DOM操作之添加元素和删除元素
- JQuery的html元素捕获、设置、元素添加与删除
- 叉姐的魔法训练(第十四课)---- 我不高兴
- jQuery 添加元素
- jquery 添加、删除元素
- jQuery - 添加元素
- linux中crontab定时器里的"2>&1"含义解释:
- Html5游戏开发攻略(像素效果篇)
- JS 网页快捷键设置
- centos 下安装 python 模块
- 瓉圩眄早上早蝇蝇嗢国一犄上
- 我的第十四课:jQuery - 添加元素
- find min and max -- 1.5n times for comparison
- 虚拟机下Ubuntu没有GUI图形界面,解决方法
- js类式继承的实现
- 轻松在mac上配置svn服务器
- 【C语言】17-预处理指令3-文件包含
- Activity——简介和使用
- Linux namespace
- iphone开发3G,wifi网络的切换