jQuery |添加标签元素/内容

通过 jQuery，可以很容易地添加新元素/内容。

我们将学习用于添加新内容的四个 jQuery 方法：

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

jQuery append() 方法 .

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

$("p").append("追加文本");

操作前后的代码对比

前：这是一个有字的段落。
后：这是一个段落。 追加文本。

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

$("p").prepend("追加文本");

操作前后的代码对比

前：这是一个有字的段落。
后：追加文本这是一个段落

jQuery after() 和 before() 方法

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

$("img").after("在后面添加文本");
$("img").before("在前面添加文本");

结果：
之前<img src="/images/logo.png">之后

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

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

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

插入之前

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function afterText(){var txt1="<b>I </b>";                    // 使用 HTML 创建元素var txt2=$("<i></i>").text("love ");     // 使用 jQuery 创建元素var txt3=document.createElement("big");  // 使用 DOM 创建元素txt3.innerHTML="jQuery!";$("img").after(txt1,txt2,txt3);          // 在图片后添加文本
}
</script>
</head>
<body><img src="/images/logo2.png" >
<br><br>
<button onclick="afterText()">之后插入</button></body>
</html>

插入之后

<body style="">
<img src="/images/logo2.png"><b>I </b><i>love </i><big>jQuery!</big>
<br><br>
<button onclick="afterText()">之后插入</button>
</body>

jQuery |添加标签元素/内容相关推荐

jq增加删除html标签,jQuery添加\删除元素
jQuery添加\删除元素 html> jquery添加和删除元素 $(function(){ //添加元素 //元素内部添加 //append()在被选元素的结尾插入内容; // $('but ...
jQuery添加插入元素技巧
1.jQuery添加插入元素技巧有两种:指定元素的里面和外面 2.里面添加: 里面的前面添加:prepend.prependTo: 里面的后面添加:append.appendTo: 3.外面添加: 外 ...
jquery 添加插入元素技巧前面和后面
jquery添加插入元素技巧: jquery添加分为在指定元素的里面添加和外面添加两种: 里面添加使用(append 和prepend) 里面添加又分为在里面的前面添加和后面添加里面的前面添加使用 ...
6 JS 和 Jquery 删除标签元素
6 JS 和 Jquery 删除标签元素 Jquery:$().remove() jQuery remove() 方法删除被选元素及其子元素, 即删除元素自身. <body> <di ...
JQuery 添加动态元素JS或CSS无效
1.动态添加的元素无法绑定事件平时写前端页面,经常用到模板引擎,或者是后期通过json动态生成的元素需要绑定各种事件,但是怎么调用都调用不到,是因为,页面加载的时候,你的js已经执行完了,但是元素还 ...
jQuery 添加删除元素
通过 jQuery,可以很容易地添加新元素/内容. 添加新的 HTML 内容我们将学习用于添加新内容的四个 jQuery 方法: append() - 在被选元素的结尾插入内容 prepend() ...
jquery添加未来元素时，其绑定事件不起作用解决办法
delegate说起对未来元素是其作用的,于是写下代码: <!DOCTYPE HTML> <html> <head><meta charset="u ...
jq在html中添加dom元素,使用jQuery添加DOM元素的最佳方法
所以我已经看到了三种向页面添加html/DOM元素的方法.我很好奇他们每个人的利弊是什么. 1 - 传统的JavaScript 我相信直接的JS方法是通过构造每个元素,设置属性,然后附加它们.例: v ...
javascrpt --- 使用jquery添加dom元素和Angular ng-repeat生成select性能比较
今天用两种方法实现了动态的给select添加option的功能. 第一种是用jquery. // html <select id="drag-pointList">&l ...

jQuery |添加标签元素/内容

我们将学习用于添加新内容的四个 jQuery 方法：

jQuery append() 方法 .

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

操作前后的代码对比

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

操作前后的代码对比

jQuery after() 和 before() 方法

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

插入之前

插入之后

jQuery |添加标签元素/内容相关推荐

最新文章

热门文章