添加内容

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. canvas 绘制三次贝塞尔曲线

    代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  2. Linux中检查内存使用情况的命令

    Linux操作系统包含大量工具,所有这些工具都可以帮助您管理系统.从简单的文件和目录工具到非常复杂的安全命令,在Linux上没有太多不能做的事情.而且,虽然普通桌面用户可能不需要在命令行熟悉这些工具, ...

  3. Python格式输出汇总

    print ('%10s'%('test')) print ('{:<10}'.format('test'))#left-aligned print ('{:>10}'.format('t ...

  4. python多个装饰器

    '''在装饰器中加上参数:1.实现在源代码中加上时间统计:函数timmer2.实现用户名认证功能:函数auth23.实现一次认证,刷新后自动登录功能,index函数已经认证并登录,在执行home函数时 ...

  5. cocos2D-X Doc

    { //https://docs.cocos2d-x.org/api-ref/index.html //https://docs.cocos.com/cocos2d-x/manual/zh/sprit ...

  6. POJ 3348 Cows (凸包模板+凸包面积)

    Description Your friend to the south is interested in building fences and turning plowshares into sw ...

  7. java 随机读写访问流及seek方法

    package stream; import java.io.File; import java.io.FileNotFoundException; import java.io.IOExceptio ...

  8. 汇编指令ADD

    格式: ADD OPRD1,OPRD2 功能: 两数相加(不带进位) 例子: add ax,bx add ax,ax 解释:

  9. 20141211--C# 构造函数

    namespace fengzhuang { class Class2 { private string _Name; private string _Code; public string _Sex ...

  10. 测开之路四十三：ajax请求

    ajax固定套路 function http(url, data, method, success, fail) { data = method == 'GET' ? data : JSON.stri ...