[ jquery 文档处理 replaceWith(content|fn) replaceAll(content) ] 此方法用于把所有匹配的元素替换成指定的HTML或DOM元素

此方法用于把所有匹配的元素替换成指定的HTML或DOM元素

  content(String, Element, jQuery, Function)

    用于将匹配元素替换掉的内容。如果这里传递一个函数进来的话,函数返回值必须是HTML字符串。

  fn

    返回THML字符串,用来替换的内容。

实例:

<html lang=‘zh-cn‘>
<head>
<title>Insert you title</title>
<meta http-equiv=‘description‘ content=‘this is my page‘>
<meta http-equiv=‘keywords‘ content=‘keyword1,keyword2,keyword3‘>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type=‘text/javascript‘ src=‘./js/jquery-1.12.1.min.js‘></script>
<style type="text/css">
    *{margin:0;padding:0;}
    html{font:400 15px/1.2em ‘Courier New‘;color:#666;width:750px;margin:25px auto;}
    ul{list-style:none;}
    .hover{color:#FF96EC;}
    .wrapAll{color:#FF96EC;}
</style>
<script type=‘text/javascript‘>
    $(function(){
      // $(‘.list‘).replaceWith(document.createElement("div"));
      $(‘.list‘).replaceWith($(‘.wrap‘));   // 这种替换方法属于移动替换,不属于复制替换   // $(‘.wrap‘).replaceAll($(‘.list‘));
    });
</script>
</head>
<body>
    <div id=‘demo‘>
        <div class=‘noClassDemo‘>
            <ul class=‘list‘>
                <li>Index value :</li>
                <li>Index value :</li>
                <li>Index value :</li>
                <li>Index value :</li>
                <li>Index value :</li>
                <li>Index value :</li>
                <li class=‘active‘>Index</li>
                <li class=‘wrap‘>Index value :</li>
                <li>Index value :</li>
            </ul>
            <div>
                <p class=‘list‘>this is unwrap test</p>
            </div>
        </div>
        <p class=‘list‘>this is unwrap test</p>
    </div>
</body>
</html>
时间: 2024-10-21 09:52:54

[ jquery 文档处理 replaceWith(content|fn) replaceAll(content) ] 此方法用于把所有匹配的元素替换成指定的HTML或DOM元素的相关文章

[ jquery 文档处理 empty() remove([expr]) detach([expr]) ] 此方法用于把所有匹配的元素移除

此方法用于把所有匹配的元素移除: remove([expr]) 概述 从DOM中删除所有匹配的元素 这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素.但除了这个元素本身得以保留之外,其他的比如绑定的事件,附加的数据等都会被移除 empty() 概述 删除匹配的元素集合中所有的子节点 detach([expr]) 概述 从DOM中删除所有匹配的元素. 这个方法不会把匹配的元素从jQuery对象中删除,因而可以在将来再使用这些匹配的元素.与remove()不同的是

jQuery文档处理总结

<!DOCTYPE html> <html lang="cn"> <head> <meta charset="UTF-8"> <title>文档操作</title> <style type="text/css"> #imglist, #imglist2 { width: 98%; padding: 10px; border: 10px solid #0a0; }

jQuery文档操作之修改操作

replaceWith() 语法: $(selector).replaceWith(content); 将所有匹配的元素替换成指定的string.js对象.jQuery对象. // 将所有的h5标题替换成a标签 $("h5").replaceWith("<a href="#">hello world</a>") //将所有的h5标签替换成id为app的dom元素 $("h5").replaceWith(

[ jquery 文档处理 append(content|fn) ] 此方法用于向每个匹配的元素内部追加内容,这个操作与javascript对指定的元素执行appendChild方法,将它们添加到文档中的情况类似

此方法用于向每个匹配的元素内部追加内容,这个操作与javascript对指定的元素执行appendChild方法,将它们添加到文档中的情况类似 参数解释如下: content 要追加到目标中的内容 function(index, html) 返回一个HTML字符串,用于追加到每一个匹配元素的里边.接受两个参数,index参数为对象在这个集合中的索引值,html参数为这个对象原先的html值. 实例: <html lang='zh-cn'> <head> <title>I

[ jquery 文档处理 wrap(html|element|fn) ] 此方法用于把所有匹配的元素用其他元素的结构化标记包裹起来

此方法用于把所有匹配的元素用其他元素的结构化标记包裹起来 实例: <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my page'> <meta http-equiv='keywords' content='keyword1,keyword2,keyword3'> <

jQuery 文档操作

jQuery 文档操作方法 方法 描述 addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之后插入内容. append() 向匹配元素集合中的每个元素结尾插入由参数指定的内容. appendTo() 向目标结尾插入匹配元素集合中的每个元素. attr() 设置或返回匹配元素的属性和值. before() 在每个匹配的元素之前插入内容. clone() 创建匹配元素集合的副本. detach() 从 DOM 中移除匹配元素集合. empty() 删除匹配的元素集合中所

jquery文档操作

jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法 描述 addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之后插入内容. append() 向匹配元素集合中的每个元素结尾插入由参数指定的内容. appendTo() 向目标结尾插入匹配元素集合中的每个元素. attr() 设置或返回匹配元素的属性和值. before() 在每个匹配的元素之前插入内容. clone() 创建匹配元素集合的副本. detach

JQuery文档操作方法跟JQuery属性操作方法跟JQuery CSS操作函数

JQuery文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法                            描述 addClass()                    向匹配的元素添加指定的类名. after()                           在匹配的元素之后插入内容. append()                       向匹配的元素内部追加内容. appendTo()                 

JQuery之JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案

JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案 JQuery的版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的版本</title> <