jquery追加元素的方法有哪些

前端开发   发布日期:2023年11月13日   浏览次数:820

这篇文章主要介绍“jquery追加元素的方法有哪些”,在日常操作中,相信很多人在jquery追加元素的方法有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”jquery追加元素的方法有哪些”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

append() 方法

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

  1. $("p").append(" <b>Hello world!</b>");

appendTo() 方法

appendTo() 方法在被选元素的结尾(在内部)插入指定内容,与append()方法作用一样。

  1. $("<b>Hello World!</b>").appendTo("p");

prepend() 方法

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

  1. $("p").prepend("Some prepended text.");

after() 方法

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

  1. $("p").after("<p>Hello world!</p>");

before() 方法

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

  1. $("img").before("Some text before");

还可以使用FOR循环进行动态变化的元素的追加;

  1. <script>
  2. //循环追加动态元素
  3. var nll= $('.topnav>li').length;
  4. for(var i=1;i<=nll;i++){
  5. $('.topnav>li:nth-child('+i+')>a').append(i);
  6. }
  7. </script>

wrap() 方法

wrap() 方法可以给某个元素添加父元素包裹。

  1. $(".ftmeau a").wrap('<span>');

CSS3中的before和after伪类

除了使用JQUERY追加元素之外,还可以使用CSS3中的before和after伪类来追加素材;

  1. .topnav li:nth-child(1) a:before{content:url(images/iconnav01.png);}

晋级知识扩展

before和insertBefore

二者效果相同,只不过语法不一样,写法不同

$(content).insertBefore(selector)

$(selector).before(content);

参数 描述
content 必需。规定要插入的内容(必须包含 HTML 标签)。

注意:如果 content 是已存在的元素,它将从它的当前位置被移除,并被插入在被选元素之前。
selector 必需。规定在何处插入内容。
  1. <div id="content" >我是原来的content</div>
  2. <script src="./jquery-1.11.1.js"></script>
  3. <script>
  4. $("#content").before("<span>我是新插入的元素</span>")
  5. //或者用insertBefore,二者效果相同,只不过写法不同
  6. //$("<span>我是新插入的元素</span>").insertBefore("#content")
  7. </script>
  8. //语句执行后的HTML结构如下
  9. <span>我是新插入的元素</span>
  10. <div id="content" >我是原来的content</div>

after和insertAfter

after和insertAfter同上before和insertBefore,只是位置不同

append和appendTo

append和appendTo 同上before和insertBefore,只是位置不同

插入已有元素

insertBefore() 方法在每个被选元素前插入一个已有元素。

appendTo() 方法在每个被选元素的结尾插入已有的元素。

  1. <script>
  2. $(document).ready(function(){
  3. $("#test1").click(function(){
  4. $("h2").appendTo("p");
  5. });
  6. $("#test2").click(function(){
  7. $("h3").insertBefore("div");
  8. });
  9. $("#test3").click(function(){
  10. $("h4").insertAfter("p");
  11. });
  12. });
  13. </script>
  14. <h2>这是一个标题</h2>
  15. <h3>这是一个标题2</h3>
  16. <h4>这是一个标题3</h4>
  17. <p>这是一个段落。</p>
  18. <div>这是另一个段落。</div>
  19. <button id="test1">移除现h2元素并在P元素结尾插入h2元素</button>
  20. <button id="test2">移除h3元素并在div元素之前插入它</button>
  21. <button id="test3">移除h4元素并在P元素后面插入它</button>

添加若干新元素

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

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

  1. <script>
  2. function fangfa(){
  3. var txt1="<b>I </b>"; // 使用 HTML 创建元素
  4. var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素
  5. var txt3=document.createElement("big"); // 使用 DOM 创建元素
  6. txt3.innerHTML="jQuery!";
  7. $("img").after(txt1,txt2,txt3); // 在图片后添加文本
  8. $("img").before(txt1,txt2,txt3); // 在图片后添加文本
  9. $("div").append(txt1,txt2,txt3); // div后追加新元素
  10. $("div").prepend(txt1,txt2,txt3); // div前追加新元素
  11. }
  12. </script>
  13. <p>第一行</p>
  14. <img src="/images/logo2.png" >
  15. <div>第三行</div>
  16. <button onclick="fangfa()">之后插入</button>

以上就是jquery追加元素的方法有哪些的详细内容,更多关于jquery追加元素的方法有哪些的资料请关注九品源码其它相关文章!