追加元素append,方法的区别及使用介绍
分类:计算机网络

append(content):方法在被选元素的结尾(仍然在内部)插入指定内容,有很多朋友觉得append与html差不多,其它从英文意义上append是在原有基础上增加,而html中是替换当前所有内容。

jquery append()方法与html()方法的区别及使用介绍,jqueryappend

append(content):方法在被选元素的结尾(仍然在内部)插入指定内容,有很多朋友觉得append与html差不多,其它从英文意义上append是在原有基础上增加,而html中是替换当前所有内容。

定义和用法

append() 方法在被选元素的结尾(仍然在内部)插入指定内容。
$(selector).append(content)

使用函数来附加内容
使用函数在指定元素的结尾插入内容。

语法

$(selector).append(function(index,html))

实例代码:

<script src="/jquery.min.js" type="text/javascript"></script> 
<style> 
.imgFocus{border: 1px solid #eee;} 
</style> 
<p> </p> 
<script type="text/javascript"> 
var showimg = "<div class='imgFocus'>123456</div>"; 
$("p").append(showimg); 
</script>

html() 方法返回或设置被选元素的内容 (inner HTML)。

如果该方法未设置参数,则返回被选元素的当前内容。
返回元素内容
当使用该方法返回一个值时,它会返回第一个匹配元素的内容。

语法

$(selector).html()

设置所有 p 元素的内容:

$(".btn1").click(function(){ 
$("p").html("Hello <b>world</b>!"); 
});

指定元素中清空

$("a[href$='logout.asp']").click(function(event) { 
event.preventDefault(); 
$.get("/xxlr/Logout.asp","",function(data, textStatus) { 
if (data == 1) { //表明注销成功 
$('#message').html(""); 
$("#userlogin>div").show(); 
} 
else { 
$('#message').append("<p><strong>注销失败,请重新尝试!</strong></p>"); 
} 
}); 
});

一、after()和before()方法的区别

jQuery 文档处理,jQuery文档处理

文档处理
1.内部插入
    1.1 append(content|fn) 向每个匹配的元素内部追加内容
        $("p").append("<span>appent</span>")
        $("p").append(function(index,html){
            return index+"这个集合中的索引值"+html+"这个对象原先的html值"
        })
    1.2 appendTo(content) 把所有匹配的元素追加到另一个指定的元素元素集合中。使用这个方法是颠倒了常规的$(A).append(B)的操作,即不是把B追加到A中,而是把A追加到B中。
        $("p").appendTo("div");
        $("<p>pppppppp</p>").appendTo("div").addClass("active");
    2.3 prepend(content|fn) 向每个匹配的元素内部前置内容
        $("p").prepend("<span>prepend</span>");
        $("p").prepend(function(index,html){return index+html})
    2.4 prependTo(content) 把所有匹配的元素前置到另一个、指定的元素元素集合中。
        $("p").prependTo("div");
2.外部插入
    2.1 after(content|fn) 在每个匹配的元素之后插入内容
        $("p").after("<span>after</span>");
        $("p").after(function(i,html){return i+html});
    2.2 before(content|fn) 在每个匹配的元素之前插入内容
        $("p").after( $("#id")[0] );
        $("p").after( $("span") );
    2.3 insertAfter(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的后面。
        $("<span>insertAfter</span>").insertAfter("p");
    2.4 insertBefore(content) 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
        $("<span>insertBefore</span>").insertBefore("p");
3.包裹
    3.1 wrap(html|element|fn) 把所有匹配的元素用其他元素的结构化标记包裹起来。
        $("p").wrap("<div class="wrap"></div>");
        $("p").wrap(document.getElementById('content'));
        $(".wrap").wrap(function(){
            return '<div class=" + $(this).text() + " />';
        })
    3.2 unwrap() 这个方法将移出元素的父元素。
        $("p").unwrap();
    3.3 wrapAll(html|elem) 将所有匹配的元素用单个元素包裹起来
        $("p").wrapAll("div");
    3.4 wrapInner(html|element|fn) 将每一个匹配的元素的子内容(包括文本节点)用一个HTML结构包裹起来
        $("p").wrapInner("<b></b>");
        $("p").wrapInner(document.createElement('b'))
        $(".inner").wrapInner(function(){
            return '<div class="+ $(this).text() +" />';
        })
4.替换
    4.1 replaceWith(content|fn) 将所有匹配的元素替换成指定的HTML或DOM元素
        $("p").replaceWith("<b>replaceWith</b>");
        $("p").replaceWith(function(){
            return '<div>$(this).text()</div>';
        });
    4.2 replaceAll(selector) 用匹配的元素替换掉所有 selector匹配到的元素。
        $("<b>replaceAll</b>").replaceAll("p");
5.删除
    5.1 empty() 删除匹配的元素集合中所有的子节点。
        $("p").empty()
    5.2 remove([expr]) 从DOM中删除所有匹配的元素,这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。但除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除。
        $("p").remove();
        $("p").remove(".remove");
    5.3 detach([expr]) 从DOM中删除所有匹配的元素,这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素。与remove()不同的是,所有绑定的事件、附加的数据等都会保留下来。
        $("p").detach();
        $("p").detach(".detach");    
6.复制
    6.1 clone([even[,deepEven]]) 克隆匹配的DOM元素并且选中这些克隆的副本。
        Even 一个布尔值(true 或者 false)指示事件处理函数是否会被复制。
        $("b").clone().prependTo("p");    //克隆所有b元素(并选中这些克隆的副本),然后将它们前置到所有段落中。
        $("button").click(function(){    //创建一个按钮,他可以复制自己,并且他的副本也有同样功能。
          $(this).clone(true).insertAfter(this);
        });

文档处理,jQuery文档处理 文档处理 1.内部插入 1.1 append(content|fn) 向每个匹配的元素内部追加内容 $("p").append("spanappent/span") $("p").appen...

定义和用法

jQuery中html(“xxx”)与append("xxx")有什不同与不同,是不是都是在页面上添加内容?

当然不一样了,append是追加,html是完全替换
比如<p id="1"><p>123</p></p>
$("#1").html("<span>456</span>");
结果是:<p id="1"><span>456</span></p>

$("#1").append("<span></span>");
结果是:<p id="1"><p>123</p><span>456</span></p>  

    after()——其方法是将方法里面的参数添加到jquery对象后面去;
    如:A.after(B)的意思是将B放到A后面去;
    before()——其方法是将方法里面的参数添加到jquery对象前面去。
    如:A.before(B)的意思是将A放到B前面去; 
 
二、insertAfter()和insertBefore()的方法的区别

append() 方法在被选元素的结尾(仍然在内部)插入指定内容。
$(selector).append(content)

jquery中 怎 使用 append() 方法 新添加的元素? $('#id')html()取不到值?

.append( content )
一个简单的例子
<!DOCTYPE html>
<html>
<head>
<style>
p { background:yellow; }
</style>
<script src="code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<p>I would like to say: </p>
<script>
$("p").append("<strong>Hello</strong>");
</script>

</body>
</html>

=========================================
我本地试了一下,这样可以取到值
<div id="con"></div>
<div id="result"></div>
<script>
$("#con").append("<div id='hello'>Hello</div>");
$("#result").html($("#hello").html());
</script>

你可以看到有两个Hello  

append()方法与html()方法的区别及使用介绍,jqueryappend append(content):方法在被选元素的结尾(仍然在内部)插入指定内容,有很多朋友觉...

    其实是将元素对调位置;
    可以是页面上已有元素;也可以是动态添加进来的元素。
    如:A.insertAfter(B);即将A元素调换到B元素后面;
    如<span>CC</span><p>HELLO</p>使用$("span").insertAfter($("p"))后,就变为<p>HELLO</p><span>CC</span>了。两者位置调换了
 
三、append()和appendTo()方法的区别

使用函数来附加内容
使用函数在指定元素的结尾插入内容。

    append()——其方法是将方法里面的参数添加到jquery对象中来;
    如:A.append(B)的意思是将B放到A中来,后面追加,A的子元素的最后一个位置;
    appendTo()——其方法是将jquery对象添加到appendTo指定的参数中去。
    如:A.appendTo(B)的意思是将A放到B中去,后面追加,B的子元素的最后一个位置;
 
四、prepend()和prependTo()方法的区别

语法

    append()——其方法是将方法里面的参数添加到jquery对象中来;
    如:A.append(B)的意思是将B放到A中来,插入到A的子元素的第一个位置;
    appendTo()——其方法是将jquery对象添加到appendTo指定的参数中去。
    如:A.appendTo(B)的意思是将A放到B中去,插入到B的子元素的第一个位置;
 
例子

$(selector).append(function(index,html))

1、insert局部方法

实例代码:

/**
 * 在父级元素上操作DOM
 * @param {Object} parent  父级元素,可以是element,也可以是Yquery对象
 * @param {String} position 位置: beforebegin/afterbegin/beforeend/afterend
 * @param {*}   any   任何:string/text/object
 * @param {Number} index  序号,如果大于0则复制节点
 * @return {Undefined}
 * @version 1.0
 * 2013年12月2日17:08:26
 */
function _insert(parent, position, any, index) {
  if ($.isFunction(any)) {
    any = any.call(parent);
  }
  // 字符串
  if ($.isString(any)) {
    if (regTag.test(any)) {
      parent.insertAdjacentHTML(position, any);
    } else {
      parent.insertAdjacentText(position, any);
    }
  }
  // 数字
  else if ($.isNumber(any)) {
    parent.insertAdjacentText(position, any);
  }
  // 元素
  else if ($.isElement(any)) {
    parent.insertAdjacentElement(position, index > 0 ? any.cloneNode(!0) : any);
  }
  // Yquery
  else if (_isYquery(any)) {
    any.each(function() {
      _insert(parent, position, this);
    });
  }
}
<script src="/jquery.min.js" type="text/javascript"></script> 
<style> 
.imgFocus{border: 1px solid #eee;} 
</style> 
<p> </p> 
<script type="text/javascript"> 
var showimg = "<div class='imgFocus'>123456</div>"; 
$("p").append(showimg); 
</script>

2、append、prepend、before、after

html() 方法返回或设置被选元素的内容 (inner HTML)。

$.fn = {
  /**
   * 追插
   * 将元素后插到当前元素(集合)内
   * @param {String/Element/Function} any
   * @return this
   * @version 1.0
   * 2013年12月29日1:44:15
   */
  append: function(any) {
    return this.each(function(index) {
      _insert(this, 'beforeend', any, index);
    });
  },
  /**
   * 补插
   * 将元素前插到当前元素(集合)内
   * @param {String/Element/Function} any
   * @return this
   * @version 1.0
   * 2013年12月29日1:44:15
   */
  prepend: function(any) {
    return this.each(function(index) {
      _insert(this, 'afterbegin', any, index);
    });
  },
  /**
   * 前插
   * 将元素前插到当前元素(集合)前
   * @param {String/Element/Function} any
   * @return this
   * @version 1.0
   * 2013年12月29日1:44:15
   */
  before: function(any) {
    return this.each(function(index) {
      _insert(this, 'beforebegin', any, index);
    });
  },
  /**
   * 后插
   * 将元素后插到当前元素(集合)后
   * @param {String/Element/Function} any
   * @return this
   * @version 1.0
   * 2013年12月29日1:44:15
   */
  after: function(any) {
    return this.each(function(index) {
      _insert(this, 'afterend', any, index);
    });
  }
};

如果该方法未设置参数,则返回被选元素的当前内容。
返回元素内容
当使用该方法返回一个值时,它会返回第一个匹配元素的内容。

3、prependTo、prependTo、insertBefore、insertAfter
这些带后缀的与上面的不同的是,返回的结果不一样。如:

语法

$('#demo').append('<a/>');
// => 返回的是 $('#demo')
$('<a/>').appendTo($('#demo'));
// => 返回的是$('a');

$(selector).html()

因此两者的关系只是返回结果不一样,其他的都一样,可以这么解决:

设置所有 p 元素的内容:

_each({
  appendTo: 'append',
  prependTo: 'prepend',
  insertBefore: 'before',
  insertAfter: 'after'
}, function(key, val) {
  $.fn[key] = function(selector) {
    this.each(function() {
      $(selector)[val](this);
    });
    return this;
  };
});
$(".btn1").click(function(){ 
$("p").html("Hello <b>world</b>!"); 
});

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

指定元素中清空

append() 方法在被选元素的结尾插入内容。

$("a[href$='logout.asp']").click(function(event) { 
event.preventDefault(); 
$.get("/xxlr/Logout.asp","",function(data, textStatus) { 
if (data == 1) { //表明注销成功 
$('#message').html(""); 
$("#userlogin>div").show(); 
} 
else { 
$('#message').append("<p><strong>注销失败,请重新尝试!</strong></p>"); 
} 
}); 
});

prepend() 方法在被选元素的开头插入内容。

下面是网友的补充:

after() 方法在被选元素之后插入内容。

当然不一样了,append是追加,html是完全替换
比如<p id="1"><p>123</p></p>
$("#1").html("<span>456</span>");
结果是:<p id="1"><span>456</span></p>

before() 方法在被选元素之前插入内容。

$("#1").append("<span></span>");
结果是:<p id="1"><p>123</p><span>456</span></p>

<script type="text/javascript" src="http://common.jb51.net/jslib/jquery/jquery.min.js"></script>
<div class="testdiv">
  <ul>
    <li>第一个li标签</li>
  </ul>
</div>

<script>

  //append
  $('.testdiv ul').append('<li>append 插入的li</li>');
  //prepend
  $('.testdiv ul').prepend('<li>prepend 插入的li</li>');
  //after
  $('.testdiv ul').after('<li>after 插入的li</li>');
  //before
  $('.testdiv ul').before('<li>before 插入的li</li>');

</script>

您可能感兴趣的文章:

  • 表单元素事件 (Form Element Events)
  • Javascript处理DOM元素事件实现代码
  • jQuery 追加元素的方法如append、prepend、before
  • jquery 新建的元素事件绑定问题解决方案
  • JavaScript利用append添加元素报错的解决方法
  • PHP中auto_prepend_file与auto_append_file用法实例分析
  • iframe里面的元素触发父窗口元素事件的jquery代码
  • jquery中append()与appendto()用法分析
  • jquery append 动态添加的元素事件on 不起作用的解决方案

效果图

图片 1

html结构图

图片 2

您可能感兴趣的文章:

  • jQuery 追加元素的方法如append、prepend、before
  • jQuery中append、insertBefore、after与insertAfter方法注意事项
  • jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
  • jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
  • jQuery使用before()和after()在元素前后添加内容的方法
  • jQuery使用after()方法在元素后面添加多项内容的方法
  • jQuery中insertAfter()方法用法实例

本文由美高梅网址发布于计算机网络,转载请注明出处:追加元素append,方法的区别及使用介绍

上一篇:没有了 下一篇:批量修改标签css样式以input标签为例
猜你喜欢
热门排行
精彩图文