我们先拟定一个代码场景

  1. <div>start</div>
  2. <p>123</p>
  3. <div>end</div>

html() 操作节点中的内容,一般我们可以用来快速给一个容器中赋值。

$("p").html("abc");

最终看到的结果

  1. <div>start</div>
  2. <p>abc</p>
  3. <div>end</div>

append() 追加到节点中的末尾处

$("p").append("abc");

最终看到的结果

  1. <div>start</div>
  2. <p>123abc</p>
  3. <div>end</div>

prepend() 追加到节点中的起始处

$("p").prepend("abc");

最终看到的结果

  1. <div></div>
  2. <p>abc123</p>
  3. <div>end</div>

alert() 追加到节点的后面

$("p").prepend("<p>abc</p>");

最终看到的结果

  1. <div>start</div>
  2. <p>123</p>
  3. <p>abc</p>
  4. <div>end</div>

before() 追加节点的前面

$("p").prepend("<p>abc</p>");

最终看到的结果

  1. <div>start</div>
  2. <p>abc</p>
  3. <p>123</p>
  4. <div>end</div>

jQuery HTML节点元素修改、追加的方法 html()、append()、prepend()、的更多相关文章

  1. jquery追加元素的几种方法(append()、prepend()、after()、before()、insertAfter()、insertBefore())

    最近项目不是很忙,抽空整理了下,js中常用追加元素的几种方法. <!DOCTYPE html> <html> <head> <meta charset=&qu ...

  2. jquery 追加元素的方法(append prepend after before 的区别)

    append() 方法在被选元素的结尾插入内容. prepend() 方法在被选元素的开头插入内容. after() 方法在被选元素之后插入内容. before() 方法在被选元素之前插入内容. &l ...

  3. jquery中使元素显示和隐藏方法之间的区别

    在实际的项目开发中,要使一个元素隐藏的方法有很多,比如css的多种属性和jquery的多种方法,虽然他们的作用都是使元素不可见,但是各个方法实现的原理是不一样的.下面主要介绍jquery各个元素隐藏方 ...

  4. jQuery 监听元素内容变化的方法

    我们可以用onchange事件来完成元素值发生改变触发的监听.但是 onchange 比较适用于<input>.<textarea> 以及 <select> 元素. ...

  5. jquery 查找子元素的几种方法

    <div class="tm-clear tb-hidden tm_brandAttr" id="J_BrandAttr" style="dis ...

  6. jquery判断页面元素是否存在的方法

  7. jquery 元素控制(追加元素/追加内容)

    参考网址:http://www.jquerycn.cn/a_5521 一.在元素内部/外部追加元素 append,prepend:添加到子元素 before,after:作为兄弟元素添加 html: ...

  8. jquery 元素控制(追加元素/追加内容)介绍及应用

    http://blog.csdn.net/gisredevelopment/article/details/41126533 一.在元素内部/外部追加元素 append,prepend:添加到子元素  ...

  9. 三、jQuery--jQuery基础--jQuery基础课程--第5章 jQuery 操作DOM元素

    1.使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值. 例如,使 ...

随机推荐

  1. HTML问题,a href =" "和 a href ="#"这两个有什么区别?

    a href ="" 默认打开的还是当前页面,会刷新一下重新打开.a href ="#" 浏览器地址栏网址后面会多显示1个#.不会刷新页面,会回到页面顶部.

  2. 远程实时调试手机上的Web页面

    1. 安装    需要Node.js平台, 先安装好后, 打开Node.js command prompt, 通过NPM来安装 weinre npm -g install weinre 2. 启动   ...

  3. JDE Section设置默认不执行

    此属性设置后,该Section仅能通过手动调用,默认不执行.

  4. UE3:SkeletalMesh的绘制流程

    [目标] SkeletalMesh的绘制流程 [思路] 1 顶点缓冲流 静态数据流向 动态数据流向(紫红色箭头) 2 FGPUSkinVertexFactory.ShaderDataType.Bone ...

  5. iOS开发拓展篇—音频处理(音乐播放器5)

    iOS开发拓展篇—音频处理(音乐播放器5) 实现效果: 一.半透明滑块的设置 /** *拖动滑块 */ - (IBAction)panSlider:(UIPanGestureRecognizer *) ...

  6. NSRunLoop概述和原理

    1.什么是NSRunLoop?我们会经常看到这样的代码: - (IBAction)start:(id)sender{pageStillLoading = YES;[NSThread detachNew ...

  7. Angular - ng-repeat高级用法

    ng-repeat高级用法: 遍历数组:    <li ng-repeat="item in array">{{item}}</li> 遍历对象:    k ...

  8. String与InputStream相互转换

    1.String to InputStream String str = "String与InputStream相互转换"; InputStream   in_nocode   = ...

  9. linux命令每日一练习-top free

    top看看进程的内存使用情况 free产看内存使用情况 top -n 2 -b > log.txt   将更新两次的结果输入到log.txt cat > log.txt //清空文件并写入 ...

  10. 从0到1---“保多多”APP的开发(一)

    2015年8月份,我正式接手了公司保多多APP的开发(和另一个同事一起). 我之前并没有过从0开始创建一款APP,这次能有这样的机会,实在让我感到兴奋.因为我相信,作为这款APP的主要开发人员,在这一 ...