jQuery 创建和插入元素

最新推荐文章于 2024-02-07 13:23:17 发布
最新推荐文章于 2024-02-07 13:23:17 发布
阅读量7.9w 收藏 37
点赞数 8
分类专栏： jQuery 文章标签： jQuery创建元素 jQuery插入元素 jquery 创建元素 插入元素
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27626333/article/details/51927022
版权

一、使用jQuery创建元素

1、创建元素

$(function(){
var $h1=$(“<h1></h1>”);
$(“body”).append($h1);
})

2、创建文本

$(function(){
var $h1=$(“<h1>DOM文档对象模型</h1>”);
$(“body”).append($h1);
})

3、创建属性

$(function(){
var $h1=$(“<h1 title=“一级标题”  class=“red”>DOM文档对象模型</h1>”);
$(“body”).append($h1);
})

二、使用jQuery插入元素

1、在节点内部插入内容

（1）、append()方法在被选元素的结尾（仍然在内部）插入指定内容

   提示：append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容的位置和选择器。

        语法：$(selector).append(content)

   content必需。规定要插入的内容（可包含 HTML 标签）。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").append(" <b>Hello world!</b>");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每个 p 元素的结尾添加内容</button>
</body>
</html>


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

        语法：$(selector).append(function(index,html))

  function(index,html) 必需。规定返回待插入内容的函数。

  index - 可选。接收选择器的 index 位置。

  html - 可选。接收选择器的当前 HTML。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").append(function(n){
      return "<b>This p element has index " + n + "</b>";
    });
  });
});
</script>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每个 p 元素的结尾添加内容</button>
</body>
</html>


 

（2）、appendTo()方法在被选元素的结尾（仍然在内部）插入指定内容

  提示：append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容和选择器的位置，以及 append() 能够使用函数来附加内容。

       语法：$(content).appendTo(selector)

  content必需。规定要插入的内容（可包含 HTML 标签）。

  selector必需。规定把内容追加到哪个元素上。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("<b> Hello World!</b>").appendTo("p");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每个 p 元素的结尾添加内容</button>
</body>
</html>



（3）、prepend() 方法在被选元素的开头（仍位于内部）插入指定内容

  提示：prepend() 和 prependTo() 方法作用相同。差异在于语法：内容和选择器的位置，以及 prependTo() 无法使用函数来插入内容。

        语法：$(selector).prepend(content)

  content必需。规定要插入的内容（可包含 HTML 标签）。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").prepend("<b>Hello world!</b> ");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每个 p 元素的开头插入内容</button>
</body>
</html>


  使用函数来附加内容，使用函数在被选元素的开头插入指定的内容。

        语法：$(selector).prepend(function(index,html))

  function(index,html) 必需。规定返回待插入内容的函数。

  index - 可选。接受选择器的 index 位置。

  html - 可选。接受选择器的当前 HTML。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").prepend(function(n){
      return "<b>这个 p 元素的 index 是：" + n + "</b> ";
    });
  });
});
</script>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>在每个 p 元素的开头插入内容</button>
</body>
</html>



（4）、prependTo() 方法在被选元素的开头（仍位于内部）插入指定内容

  提示：prepend() 和 prependTo() 方法作用相同。差异在于语法：内容和选择器的位置，以及 prepend() 能够使用函数来插入内容。

         语法：$(content).prependTo(selector)

  content 必需。规定要插入的内容（可包含 HTML 标签）。

  selector 必需。规定在何处插入内容。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("<b>Hello World!</b>").prependTo("p");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">在每个 p 元素的开头插入文本</button>
</body>
</html>


 

2、在节点外部插入内容

（1）、after() 方法在被选元素后插入指定的内容

       语法：$(selector).after(content)

   content必需。规定要插入的内容（可包含 HTML 标签）。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").after("<p>Hello world!</p>");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button>在每个 p 元素后插入内容</button>
</body>
</html>



  使用函数来插入内容，使用函数在被选元素之后插入指定的内容。

        语法：$(selector).after(function(index))

  function(index) 必需。规定返回待插入内容的函数。

  index - 可选。接收选择器的 index 位置。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").after(function(n){
      return "<p>The p element above has index " + n + "</p>";
    });
  });
});
</script>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>在每个 p 元素后插入内容</button>
</body>
</html>


 

（2）、before() 方法在被选元素前插入指定的内容

        语法：$(selector).before(content)

    content 必需。规定要插入的内容（可包含 HTML 标签）。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").before("<p>Hello world!</p>");
  });
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">在每个段落前面插入新的段落</button>
</body>
</html>


  使用函数来插入内容，使用函数在指定的元素前面插入内容。

     语法：$(selector).before(function(index))

  function(index)必需。规定返回待插入内容的函数。

  index - 可选。接收选择器的 index 位置。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").before(function(n){
      return "<p>The p element below has index " + n + "</p>";
    });
  });
});
</script>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button class="btn1">在每个段落前面插入新的段落</button>
</body>
</html>


 

（3）、insertAfter()把匹配的元素插入到另一个指定的元素集合的后面

  注释：如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之后。

       语法：$(content).insertAfter(selector)

  content必需。规定要插入的内容。可能的值：选择器表达式、HTML 标记

  selector必需。规定在何处插入被选元素。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("<span>你好！</span>").insertAfter("p");
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>在每个 p 元素之后插入 span 元素</button>
</body>
</html>


插入已有的元素

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("h1").insertAfter("p");
  });
});
</script>
</head>
<body>
<h1>这是一个标题</h1>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>在每个 p 元素之后插入 h1 元素</button>
</body>
</html>



（4）、insertBefore()把匹配的元素插入到另一个指定的元素集合的前面

   注释：如果该方法用于已有元素，这些元素会被从当前位置移走，然后被添加到被选元素之前。

        语法：$(content).insertBefore(selector)

   content 必需。规定要插入的内容。可能的值：选择器表达式、HTML 标记

   selector 必需。规定在何处插入被选元素。

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("<span>你好！</span>").insertBefore("p");
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>在每个 p 元素之前插入 span 元素</button>
</body>
</html>


 

A_山水子农
关注
  • 8
    点赞
  • 踩
  • 37
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
jQuery实现表格元素动态创建功能
01-19
Jquery实现表格元素的动态创建，本质是通过构造一个Dom Node节点，并且拼接到表格的Dom树上的子叶位置。 HTML正文： 用户：<input type=text id=user/> 邮箱：<input type=text id=mail/> 手机：<input type=text id=phone/> <br> <button id=b1>添加</button><br> <table border=1 id=table> <tr><td>user</td><td>mail</td><td>phone</td><td>operation</td></
基于Jquery的动态创建DOM元素的代码
10-28
jquery动态创建页面元素，mark一下，以备以后查询时使用。以创建div和input为例。
jQuery插入新元素
最新发布
BUG制造者:图图 <p>这是一个P标签</p>
02-07 269
1</a>追加到p元素尾部。将<a>1</a>追加到p元素头部。将<a>1</a>插入到p元素后方。将<a>1</a>插入到p元素前方。在p元素尾部追加<a>1</a>。在p元素头部追加<a>1</a>。在p元素后方插入<a>1</a>。在p元素前方插入<a>1
jQuery使用之设置元素样式用法实例
10-24
主要介绍了jQuery使用之设置元素样式用法,实例分析了jQuery如何设置页面的样式风格,包括添加、删除、动态切换等的使用技巧,需要的朋友可以参考下
jQuery动态创建元素以及追加节点的实现方法
10-21
下面小编就为大家带来一篇jQuery动态创建元素以及追加节点的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jquery html动态添加的元素绑定事件详解
10-22
下面小编就为大家带来一篇jquery html动态添加的元素绑定事件详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
jQuery中元素的创建
ln201009的博客
05-07 5679
1、我们先说单个元素的创建，在一个div盒子里创建一个a标签，我们就需要先写入一个按钮和一个div盒子。如下图所示，要实现的功能就是点击按钮在盒子内创建一个a标签。 2、我们想要的功能需要通过jQuery来实现，所以先引入一个jQuery的插件，然后写一个script标签来写jQuery代码块。 3、首先我们先写一个页面加载事件，在jQuery中的页面加载事件是一个$符号然后一个小括号，小括号里面写function。 4、页面加载完成后，要写的就是按钮点击事件，首先我们要先获取到按钮.
div+span
weixin_40876986的博客
04-12 6494
1. 什么是DIV ？(块元素） 作用 ： 一般用于配合CSS完成网页的基本布局。 2. 什么是SPAN ？（行内元素） 作用：一般用户配合CSS修改网页中的一些局部信息。 3. div 和 span 的区别 1. div 会单独的占领一行，span不会单独的占有一行。 2. div是一个容器级的标签，而span是一个文本级的标签 3. 容器级的标签和文本级的标签的区别？ 容...
（十一）jQuery添加元素或内容的方法
北斗星的爱886的博客
07-07 2837
1、append()方法 在被选元素结尾添加新元素。 <div class="add">好好学习，天天向上。</div> <br> <button>添加元素</button> 效果： 在被选元素内部结尾添加新元素。 2、prepend()方法 在被选元素的开头添加新元素。 <div class="add">好好学习，天天向上。</div> <br> <button>添加元素&
css布局之div + span 以及盒模型
winson的专栏
08-28 1957
本篇主要介绍div + span 以及盒模型的使用。 span：内联元素----包裹其内容。     div是块级元素----占用整行。  盒模型：相当于容器。 Div+Css布局(div+span以及盒模型) body{ margin:0px; padding:0px; } /* div{ background
python 列表 头部 尾部 添加元素
whatday的专栏
10-17 5100
往头部添加元素 list.insert(index,new_element) index 为新元素的插入位置，当index=0时，往头部添加新元素。 new_element 为要插入的元素。 例子： names.insert(0,'Bill') 往尾部添加元素 list.append(new_element) 例子： names.append('Bill') ...
jquery+加入新元素_jQuery How-to：创建和插入新元素（第1部分）
cune1359的博客
07-01 163
jQuery是地球上最受欢迎JavaScript库之一，它提供了很多功能。 使用jQuery，我们可以轻松地操作-替换，插入，删除HTML文档中的元素，甚至创建动画。 在本文中，我们将研究如何使用jQuery Append方法在DOM中创建或插入新元素。 推荐阅读： jQuery：创建和插入新元素–第二部分 插入新元素 追加是一种在指定元素内创建和插入新元素的方法，从技术上讲，...
JQuery选择器
雷蒙的博客
03-05 301
选择器简介 JQuery选择器允许对HTML元素组成单个元素进行操作 JQuery选择器基于元素的Id、类型、属性、属性值等(查找或选择)HTML元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。 jQuery 中所有选择器都以美元符号开头：$()。 基本选择器 基本选择器是JQuery 中最常用的选择器，也是最简单的选择器，它通过元素id 、class 和...
jQuery: jQuery元素添加
weixin_44785966的博客
08-02 242
一.jQuery中用于添加的方法有五种： ①append() :在选中的html标签的内部的后面添加元素。 ②prepend() :在选中的html标签的内部的前面添加元素。 ③after() :在选中的html标签的外部的后面添加元素。 ④before() :在选中的html标签的外部的前面添加元素。 ⑤wrap() :将选中的html标签用新添加的元素包裹。 二.代码示例： <!DOCTYPE html> <html> <head> <me
jq追加元素最前面_jQuery 追加元素的方法如append、prepend、before
weixin_39684495的博客
12-20 238
1.jQuery append() 方法jQuery append() 方法在被选元素的结尾插入内容。实例$("p").append("Some appended text.");2.jQuery prepend() 方法jQuery prepend() 方法在被选元素的开头插入内容。实例$("p").prepend("Some prepended text.");3、after() 和 befo...
jQuery 创建元素、添加元素、删除元素 【一篇文章轻松拿下】
weixin_52212950的博客
05-04 3130
原生 JS 中，我们学习了一整套元素创建添加删除的操作，其中创建元素，我们用了 creatElement，添加元素有两种，分别是后面追加 apprndChild，和指定元素前插入 insertBefore，在 jQuery 里，也有一整套的元素创建添加删除的方法，下面带大家一起学习一下 jQuery 的元素创建，添加，和删除 三连拳法吧！！！ 一：元素创建 元素的创建相对于原生 JS 简直不要容易太多，我们只需要一个 ‘ $ ’ 符号就可以走遍天下 元素创建格式：$('<div>&..
jQuery 创建元素的方法
m0_57835615的博客
06-11 3381
通过jQuery，我们可以创建新的元素，并将它添加到页面上去。 示例： （1）添加新段落 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="../jQuery/jQuery.js"></script> <script> $(document).ready(function(){
jQuery之创建和添加元素
weixin_63040021的博客
06-09 554
了解jQuery是怎么创建和添加元素的
JQ 插入元素
前端技术
07-04 1248
代码：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id
jquery 怎么创建数组,怎么添加元素
07-13
要在 jQuery 中创建数组并添加元素，可以使用 JavaScript 的数组语法和 jQuery 的方法。以下是示例代码： ```javascript // 创建一个空数组 var myArray = []; // 添加元素到数组末尾 myArray.push('元素1'); myArray.push('元素2'); myArray.push('元素3'); ``` 上述代码中，通过 `[]` 创建了一个空数组 `myArray`。然后，使用 `.push()` 方法将元素逐个添加到数组的末尾。 你还可以使用其他方法向数组中添加元素，如 `.unshift()` 在数组开头添加元素，`.splice()` 在指定位置插入元素等。根据具体需求选择适当的方法来添加元素到数组中。 请注意，这些方法都是基于 JavaScript 数组的操作，与 jQuery 本身并无直接关联。jQuery 本身主要用于处理 DOM 元素和提供一些实用功能，而不是专注于数组操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值