添加内容

html

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title>jquery</title>

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

		<script type="text/javascript" src="js/try.js" ></script>

	</head>

	<body>

		<p id="p1">hello</p>

		<button id="btn1">点击</button>

		<p id="p2">world</p>

		<button id="btn2">点击</button>

		<p id="p3">world</p>

		<button id="btn3">点击</button>

		<p id="p4">world</p>

		<button id="btn4">点击</button>

	</body>

</html>

　　js

$(document).ready(function(){

  $("#btn1").click(function(){

    $("#p1").append(" world");

    });

  $("#btn2").click(function(){

    $("#p2").prepend("hello ");

    });

    $("#btn3").click(function(){

    $("#p3").before("hello ");

    });

    $("#btn4").click(function(){

    $("#p4").after("hello ");

    });

});

　　效果:

2017-09-21   17:29:21

jQuery HTML- 添加元素的更多相关文章

  1. jquery动态添加元素无法触发绑定事件的解决方案。

    jquery动态添加元素无法触发绑定的事件的解决方案. ╭(●｀∀´●)╯二狗最近在工作中遇到一个问题,即当用jquery动态添加元素后,发现给动态添加的元素却无法触发事件(╯#-_-)╯╧═╧ ( ...

  2. jQuery动态添加元素事件

    在项目中遇到需要jQuery动态添加元素的事件,做了一个demo,方便以后遇到相同的问题可以用上: <!DOCTYPE html> <html> <head> &l ...

  3. jquery中添加元素append，prepend，before和after方法的区别

    append:在元素内部的最后面添加元素,作为子元素. prepend:在元素内部的最前面添加元素,作为子元素. before:在元素的前边,作为兄弟元素添加. after:在元素的后边,作为兄弟元素 ...

  4. jquery动态添加元素无法触发绑定的事件的解决方案

    方法一:绑定live事件(live事件只在jquery1.9以下才支持,高版本不支持). //jquery 1.9(不包括1.9)以下可以 $(".btn").live(" ...

  5. jQuery 新添加元素事件绑定无效

    jQuery中事件绑定,大多使用on就足够了. 但是对于新添加的元素 on 的绑定事件 会不起作用. 因为 append 中的 节点是在整个文档加载之后才添加的,页面并不会为未来的元素初始化添加点击事 ...

  6. Jquery动态添加元素并给元素增加onchange相应

    动态添加元素: $select = $("<select></select>"); $("<option></option> ...

  7. jQuery动态添加元素,并提交json格式数据到后台

    参考:https://www.cnblogs.com/shj-com/p/7878727.html 下载 下载该插件的地址是:http://www.bootcdn.cn/jquery.serializ ...

  8. jQuery动态添加元素并绑定事件

    写网页的时候常常需要根据实际情况添加新的元素,然后这些新元素还需要绑定已有的事件,如:有一ul,点击其中某 li,根据其 id 或 value 等获取新的数据列表,并新建 ul 显示,新 ul 中的 ...

  9. jquery新添加元素无法删除

    $("body").on('click',".delic",function(){ $(this).parent().remove(); })

  10. Jquery 动态添加元素后，获取不到元素对象情况

随机推荐

  1. pandas模块之读取文件

    首先我们来看一个文件 1 男 北京 刘一 我笑 #跳过此行,序号1 2 女 上海 刘珊 你笑 3 男 杭州 刘五 他笑 #跳过此行,序号四 4 女 重庆 刘六 不笑了 下面来分析内容,并使用参数 1 ...

  2. springboot实战（汪云飞）学习-1-1

    java EE开发的颠覆者 spring boot 实战 随书学习-1 1.学习案例都是maven项目,首先要在eclipse 中配置 maven,主要修改maven的配置文件:配置文件下载链接: h ...

  3. wnmp的配置

    第一部分:准备工作.(系统:Windows 8.1) 1.首先是下载软件. NGINX-1.3.8官网下载:http://nginx.org/en/download.html PHP5.4.8版本下载 ...

  4. PHP curl_getinfo函数

    curl_getinfo — 获取一个cURL连接资源句柄的信息 说明 mixed curl_getinfo ( resource $ch [, int $opt = 0 ] ) 获取最后一次传输的相 ...

  5. 【UNR #2】黎明前的巧克力 解题报告

    [UNR #2]黎明前的巧克力 首先可以发现,等价于求 xor 和为 \(0\) 的集合个数,每个集合的划分方案数为 \(2^{|S|}\) ,其中 \(|S|\) 为集合的大小 然后可以得到一个朴素 ...

  6. C#读取csv、xls、sql数据库的实现

    using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Secu ...

  7. window 安装iis和使用

    一.IIS安装(服务名World Wide Web Publishing Service) 实验环境:win2008R2虚拟机1.首先打开虚拟机,然后选中管理工具->服务器管理器. 2.选中角色 ...

  8. Cent OS （一）Cents OS的基本安装

    1.实验环境: VMware Workstation Pro   14 Pro Cent OS 7 系列. 2. 镜像地址传送门: 阿里云开源镜像站:http://mirrors.aliyun.com ...

  9. asp label居中

    https://stackoverflow.com/questions/25245839/align-a-label-to-the-right-using-asp-net Try something ...

  10. （二）linux内核准备及编译

    1. 内核下载地址 linux内核网站,可以拿到最新的和最近的稳定版本内核: https://www.kernel.org/ 通过网站下载压缩包后解压或者使用git下载到本地: git clone h ...