添加元素的方法

append()、appendTo()、prepend()、prependTo()、after()、before()

通过 append() 、appendTo()、prepend() 、prependTo()方法添加若干新元素

在上面的例子中,我们只在被选元素的开头/结尾插入文本/HTML。

不过,append() 和 prepend() 方法能够通过参数接收无限数量的新元素。可以通过 jQuery 来生成文本/HTML(就像上面的例子那样),或者通过 JavaScript 代码和 DOM 元素。

在下面的例子中,我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中(对 prepend() 同样有效):

function appendText()
{
var txt1="<p>Text.</p>"; // Create element with HTML
var txt2=$("<p></p>").text("Text."); // Create with jQuery
var txt3=document.createElement("p"); // Create with DOM
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3); // Append the new elements
}

通过 after() 和 before() 方法添加若干新元素

after() 和 before() 方法能够通过参数接收无限数量的新元素。可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建新元素。

在下面的例子中,我们创建若干新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 after() 方法把这些新元素插到文本中(对 before() 同样有效):

function afterText()
{
var txt1="<b>I </b>"; // Create element with HTML
var txt2=$("<i></i>").text("love "); // Create with jQuery
var txt3=document.createElement("big"); // Create with DOM
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3); // Insert new elements after img
}

Jquery复习(五)之append()、appendTo()、prepend()、prependTo()、after()、before()易忘点的更多相关文章

  1. jQuery中append appendTo prepend prependTo insertBefore insertAfter after before之间的区别

    jQuery中有一个很关键的元素操作,他们的使用方法都一样,但是呈现的结果有所不同. <!DOCTYPE html> <html lang="en"> &l ...

  2. 比较jquery中的after(),append(),appendTo()方法

    html页面: <p id="myp1">我的兴趣爱好是:</p> <button id="b1">after函数</ ...

  3. 关于append,appendTo,prepend,prependTo的区别

    之前做项目对于这几个的方法总是有点模糊,尤其是prepend和prependTo; 1.append <style> span{ background:yellow; } .test{ b ...

  4. jQuery文档操作--append()、prepend()、after()和before()

       append(content|fn)  概述 向每个匹配的元素内部追加内容,这个操作与对指定的元素执行appendChild方法,将它们添加到文档中的情况类似 参数    content  要追 ...

  5. jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法)

    jQuery之设置元素内容(移动和复制元素,使用append(),appendTo()方法) ---------- 如果想把内容添加到现有内容末尾,可以利用append()命令.append()命令语 ...

  6. jquery:after append appendTo三个函数的区别

    1.查找元素节点      var $li = $(“ul li:eq(0)”);//获取ul标记下的第一个li,也可以写成 $(“#ulID li:eq(0)”);    2.查找元素属性 利用jq ...

  7. jquery中append跟prepend的用法

    jquery中append和prepend的用法 append   是插入到元素中,并放到元素内的最后面prepend  是插入到元素中,并放到元素内的最前面例$("body"). ...

  8. 添加新内容的四个 jQuery 方法:append,prepend,after,before

    添加新内容的四个 jQuery 方法区别如下: append() - 在被选元素(里面)的结尾插入内容prepend() - 在被选元素(里面)的开头插入内容 //jQuery append() 方法 ...

  9. jQuery中append()、prepend()与after()、before()的区别

    转载 未曾见海  https://www.cnblogs.com/afei-qwerty/p/6682963.html 在jQuery中,添加元素有append(),prepend() 和 after ...

随机推荐

  1. JS框架_(Popup.js)3D对话框窗口插件

    百度云盘 传送门 密码:afdo 3D对话框窗口插件效果: <!doctype html> <html lang="zh"> <head> &l ...

  2. 利用angular4和nodejs-express构建一个简单的网站(五)—用户的注册和登录-HttpClient

    上一节简单介绍了一下利用angular构建的主路由模块,根据上一节的介绍,主页面加载时直接跳转到用户管理界面,下面就来介绍一下用户管理模块.启动应用后,初始界面应该是这样的: 用户管理模块(users ...

  3. Java线程细节

    启动一个线程是用  run() 还是 start()?启动一个线程是调用 start()方法,启动线程并调用 run 方法 线程的基本概念.线程的基本状态以及状态之间的关系线程是进程内的并发,没有自已 ...

  4. GreyMagic

    hearthbuddy中的一段代码 // Token: 0x06001A79 RID: 6777 RVA: 0x000DD024 File Offset: 0x000DB224 internal In ...

  5. Laravel框架之获取URL地址

    1. 使用 Request 类: $url = Request::getRequestUri(); 2. 使用 $request 对象: public function show(Request $r ...

  6. leetcode 328 奇偶链表

    更新代码: 开头检测是否需要调整(是否具有第三个节点) 使用三个ListNode* 变量记录奇偶链表的头尾headA,tailA为奇链表,headB为偶数链表,由于只需要最后令tailA->ne ...

  7. 设置terminal 命令别名

    vi -/.bash_profile code () { VSCODE_CWD="$PWD" open -n -b "com.microsoft.VSCode" ...

  8. 阶段3 2.Spring_03.Spring的 IOC 和 DI_10 构造函数注入

    在AccountServiceImpl内定义三个属性 这里关注点是这几种类型.基本类型的包装类Integer 还有String类型,也包含了其他bean类型.Date 定义构造函数并赋值 重点关注在数 ...

  9. 十三:jinja2过滤器之default过滤器和or过滤器

    在模板里面有时候需要对传过来的数据进行一些处理,jinja2有一些内置的过滤器可以进行处理.类似于python内置函数,通过 “|” 进行使用,详见jinja2官方文档 使用方法:{{ 变量名|过滤器 ...

  10. swiper 的左右箭头放到轮播外面

    <!-- 增加一个father的包裹 --> <div class="swiper-father"> <div class="swiper- ...