添加内容

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. TCP协议的简单应用一

    TCP协议的应用,实现一个服务器处理多个客户端请求(向服务器发送消息,服务器接收到后以原消息返回给客户端.) 客户端类 import java.io.*; import java.net.Socket ...

  2. python之chardet用来检测字符串编码的

    import chardet a=b'\xe4\xbd\xa0\xe5\xa5\xbd\xef\xbc\x8c\xe4\xb8\x96\xe7\x95\x8c\xe3\x80\x82'print(ch ...

  3. Kafka初识

    1.概述 1.1.Apache Kafka是一个   分布式  流处理   平台: 2.Kafka适应于什么场景? 2.1.构造  实时  流数据管道,在  系统 或 应用之间  可靠地获取数据(相当 ...

  4. Redis5离线安装

    1. 直接上redis官网安装包, 然后上传服务器 https://redis.io/download 2. 解压 tar -zxvf redis-5.0.6.tar.gz 3. 进入redis根目标 ...

  5. Python函数中*args和**kwargs来传递变长参数的用法

    参考自: http://www.jb51.net/article/78705.htm 单星号形式(*args)用来传递非命名键可变参数列表.双星号形式(**kwargs)用来传递键值可变参数列表. 1 ...

  6. .NET Core 构建跨平台的桌面应用

    1.运行环境 开发工具:Visual Studio 2017 JDK版本:.NET Core 2.0 项目管理工具:nuget 2.GITHUB地址 https://github.com/nbfujx ...

  7. 状压 DP：[USACO06NOV] Corn Fields，[USACO13NOV] No Change

    [USACO06NOV] Corn Fields (试题来源:Link ) 题目描述 Farmer John has purchased a lush new rectangular pasture ...

  8. [CSP-S模拟测试]:chemistry（期望DP+组合数学）

    题目传送门(内部题27) 输入格式 第一行有$4$个整数$n,k,p,q$.第二行有$n$个整数$a_i$.接下来有$n-1$行,每行有两个整数$u,v$,表示$u$与$v$之间通过化学单键连接. 输 ...

  9. 运行python不报错，运行pip报错

    Fatal error in launcher: Unable to create process using '""c:\program files (x86)\python36 ...

  10. python slot

    每个实例包含一个字典,slot 让实例变成tup 或list,减少内存,但不能再增加属性 For classes that primarily serve as simple data structu ...