添加内容

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. BZOJ3207 花神的嘲讽计划I

    Time Limit: 10 Sec Memory Limit: 128 MB Summary 给你一个模式串P,q个询问,对每个询问回答从Pl到Pr是否存在与给定串相同的子串,同时有所有的给定串长度 ...

  2. @PostMapping

    @PostMapping映射一个POST请求 Spring MVC新特性 提供了对Restful风格的支持 @GetMapping,处理get请求 @PostMapping,处理post请求 @Put ...

  3. python不能运行

    运行python文件出现,报错please select a valid interpreter 这是因为没有选择interpreter  就是更改目录时需要重新选择pytho解析器 解决方法如下 更 ...

  4. 回炉Spring--事务及Spring源码

    声明式事务 配置文件信息: /** * @EnableTransactionManagement 开启基于注解的事务管理功能 * 1.配置数据源 * 2.配置事务管理器来管理事务 * 3.给方法上标注 ...

  5. paper 158：CNN(卷积神经网络)：Dropout Layer

    Dropout作用 在hinton的论文Improving neural networks by preventing coadaptation提出的,主要作用就是为了防止模型过拟合.当模型参数较多, ...

  6. Autoresize UIView to fit subviews

    @interface UIView (resizeToFit) -(void)resizeToFitSubviews; -(void)resizeHightToFitSubviews; -(void) ...

  7. 18. Jmeter-取样器二

    jmeter-sampler介绍与使用 JMS Point-to-Point JMS Publisher JMS Subscriber JSR223 Sampler JUnit Request Jav ...

  8. 2019.7.26 NOIP 模拟赛

    这次模拟赛真的,,卡常赛. The solution of T1: std是打表,,考场上sb想自己改进匈牙利然后wei了(好像匈牙利是错的. 大力剪枝搜索.代码不放了. 这是什么神仙D1T1,爆蛋T ...

  9. 使用 nm-applet 连接 WPA2-Enterprise wireless

    安装之后,使用 nm-connetion-editor 编辑连接信息: 之使 systemctl retart NetworkManager: 之后使用 nmcli conn up $CONNECT_ ...

  10. APP测试功能点

    1.使用APP时手机耗电情况 2.APP占用手机内存 3.APP在不同网络下的使用情况(WiFi/4G/3G/2G) 4.APP安装包大小 5.APP流量消耗 6.APP支持系统版本(android, ...