jQuery 入门教程(14): 添加HTML元素

2023-11-17

使用jQuery可以方便的添加新的HTML元素。
下面的方法用于添加HTML元素：

append() – 在指定的元素的尾部添加一个新内容。
prepend() -在指定的元素里前部添加新内容。
after() – 在指定元素后添加新内容
before() -在指定元素的前面添加新内容。

乍一看append,prepend 和after,before似乎功能一样，但append,prepend指在选中的元素本身（内部）的前面和后面，而after,before指在选择中的元素的前面和后面。

可以参考下面的append例子：

[html] view plain copy print ?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Demo</title>
<script src="scripts/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("p").append(" <b>Appended text</b>.");
});
$("#btn2").click(function () {
$("ol").append("<li>Appended item</li>");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">Append text</button>
<button id="btn2">Append list items</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery Demo</title>
    <script src="scripts/jquery-1.9.1.js"></script>
    <script>
        $(document).ready(function () {
            $("#btn1").click(function () {
                $("p").append(" <b>Appended text</b>.");
            });

            $("#btn2").click(function () {
                $("ol").append("<li>Appended item</li>");
            });
        });
    </script>
</head>

<body>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ol>
    <button id="btn1">Append text</button>
    <button id="btn2">Append list items</button>
</body>
</html>

prepend示例：

[html] view plain copy print ?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Demo</title>
<script src="scripts/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("p").prepend("<b>Prepended text</b>. ");
});
$("#btn2").click(function () {
$("ol").prepend("<li>Prepended item</li>");
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">Prepend text</button>
<button id="btn2">Prepend list item</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery Demo</title>
    <script src="scripts/jquery-1.9.1.js"></script>
    <script>
        $(document).ready(function () {
            $("#btn1").click(function () {
                $("p").prepend("<b>Prepended text</b>. ");
            });
            $("#btn2").click(function () {
                $("ol").prepend("<li>Prepended item</li>");
            });
        });
    </script>
</head>
<body>

    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ol>

    <button id="btn1">Prepend text</button>
    <button id="btn2">Prepend list item</button>

</body>
</html>

append(),prepend()支持同时插入多个元素，下面的例子添加三个使用不同方法创建的新元素：

[html] view plain copy print ?

function appendText()
{
// Create element with HTML
var txt1="<p>Text.</p>";
// Create with jQuery
var txt2=$("<p></p>").text("Text.");
// Create with DOM
var txt3=document.createElement("p");
txt3.innerHTML="Text.";
// Append the new elements
$("p").append(txt1,txt2,txt3);
}

function appendText()
 {
 // Create element with HTML
 var txt1="<p>Text.</p>";
// Create with jQuery
 var txt2=$("<p></p>").text("Text.");
 // Create with DOM
 var txt3=document.createElement("p");
 txt3.innerHTML="Text.";
 // Append the new elements
 $("p").append(txt1,txt2,txt3);
 }

下面的例子使用after,before 在指定的元素前后面添加新内容：

[html] view plain copy print ?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery Demo</title>
<script src="scripts/jquery-1.9.1.js"></script>
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("img").before("<b>Before</b>");
});
$("#btn2").click(function () {
$("img").after("<i>After</i>");
});
});
</script>
</head>
<body>
<img src="/images/guidebee.png"
alt="guidebee" width="120" height="125">
<br>
<br>
<button id="btn1">Insert before</button>
<button id="btn2">Insert after</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JQuery Demo</title>
    <script src="scripts/jquery-1.9.1.js"></script>
    <script>
        $(document).ready(function () {
            $("#btn1").click(function () {
                $("img").before("<b>Before</b>");
            });

            $("#btn2").click(function () {
                $("img").after("<i>After</i>");
            });
        });
    </script>
</head>

<body>
    <img src="/images/guidebee.png"
        alt="guidebee" width="120" height="125">
    <br>
    <br>
    <button id="btn1">Insert before</button>
    <button id="btn2">Insert after</button>
</body>
</html>

同样after,before也支持同时插入多个元素：

[html] view plain copy print ?

function afterText()
{
// Create element with HTML
var txt1="<b>I </b>";
// Create with jQuery
var txt2=$("<i></i>").text("love ");
// Create with DOM
var txt3=document.createElement("big");
txt3.innerHTML="jQuery!";
// Insert new elements after img
$("img").after(txt1,txt2,txt3);
}

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Jquery学习笔记

jQuery 入门教程(14): 添加HTML元素的相关文章

python3 通过 pybind11 使用Eigen加速

python是很容易上手的编程语言但是有些时候使用python编写的程序并不能保证其运行速度例如 while 和 for 这个时候我们就需要借助c 等为我们的代码提速下面是我使用pybind11调用c 的Eigen库的简单介绍第一步
实现页面失去焦点十秒后强制执行js

页面失去焦点后开始倒计时时间到了执行指定js 适用于检测页面无操作退出登录在线答题防止切换页面搜索答案浏览页面多久后获取奖励等场景
概率论与数理统计--排列组合（一）

排列从n个不同元素中任取m m n m与n均为自然数下同个元素按照一定的顺序排成一列叫做从n个不同元素中取出m个元素的一个排列从n个不同元素中取出m m n 个元素的所有排列的个数叫做从n个不同元素中取出m个元素的排列数用符
118.杨辉三角

一题目 118 杨辉三角力扣 LeetCode 二代码 class Solution public vector
开关电源环路稳定性分析(2)-从开环到闭环

大家好这里是大话硬件在上一节中基于欧姆定律基尔霍夫定律伏秒平衡这些已知的知识点可以推导出Buck变换器的输入输出关系今天这一节我们还是从全局的概念来解析开关电源 1 运放和开关电源如果一上来就分析开关电源的环路稳定性我估
Spring Boot中集成Redis

14 1 简介 redis是一款高性能的NOSQL系列的非关系型数据库 14 1 1 非关系型数据库的优势 1 性能NOSQL是基于键值对的可以想象成表中的主键和值的对应关系而且不需要经过SQL层的解析所以性能非常高 2 可扩展性同样

随机推荐

华为三层交换机STP配置

学习目的掌握启用和关闭STP的方法了解不同的STP模式的差异掌握修改网桥优先级影响根网桥选举的方法掌握修改端口优先级影响根端口与指定端口选举的方法掌握配置边缘的方法拓扑图场景你是公司的网络管理员公司的网络使用了两层网络结构
Redis基础--认识redis和对比同类型产品

一 redis定义与应用 Nosql定义 NoSQL是不同于传统的关系数据库的数据库管理系统的统称其两者最重要的区别是NoSQL不使用SQL作为查询语言 MySQL定义 MySQL是一种关系型数据库关系型数据库的一个常见用法是存储长期的
如何大批量压缩图片

一 ImageMagick ImageMagick 是一个功能强大的命令行图像处理工具可以用于批量处理图片它支持各种图像格式和操作包括压缩和优化二使用 ImageMagick 进行大批量压缩指定路径的图片你可以通过以下步骤实现
JavaScript中的内存回收机制

JS的内存回收在js中垃圾回收器每隔一段时间就会找出那些不再使用的数据并释放其所占用的内存空间以全局变量和局部变量来说函数中的局部变量在函数执行结束后这些变量已经不再被需要所以垃圾回收器会识别并释放它们而对于全局变量垃圾回收
宝塔中 nodejs项目 nginx 网站基础/代理设置

上面是一些基础配置就不写了吧请求全部代理到 nodejs 项目 location 如果使用pm2等启动node项目需要加header头防止读取不到客户端IP proxy set header Host proxy host proxy
生态伙伴

提到时间管理想必大多数人的第一反应就是番茄工作法番茄工作法是意大利人弗朗西斯科西里洛于1992年创立的他和我们大多数人一样是一个重度拖延症患者在他大学生活的前几年曾一度苦于学习效率低下于是他做了个简单的实验他找来形状像番
JMeter下载及使用

前言我是个前端只是一次偶然的机会被安排用了一次JMeter 做了下步骤记录所以内容比较基础想深入研究的兄弟可以再多找找哈一下载官网地址 Apache JMeter Download Apache JMeter 下载zip包应
计算机网络的软件系统包括哪几部分,系统软件由哪几部分组成?

系统软件用于实现计算机系统的管理调度监视和服务等功能其目的是方便用户提高计算机使用效率扩充系统的功能通常将系统软件分为以下六类 1 操作系统操作系统是控制和管理计算机各种资源自动调度用户作业程序处理各种中断的软件操作系统的
邮件发送接收原理

概述电子邮件是因特网上使用得非常多的一种应用它可以非常方便的使相隔很远的人进行通信它主要的特点就是操作简单快捷当你发送一封邮件的时候它首先会发送到收件人的邮件服务器上并放入收件人的信箱中如果你在某一个邮件服务器提供商那里申请
建站系列（二）--- 域名、IP地址、URL、端口详解

目录相关系列文章前言一 IP地址二域名与IP地址三域名与URL 四 IP地址与端口号相关系列文章建站系列一网站基本常识建站系列二域名 IP地址 URL 端口详解建站系列三网络协议建站系列四 Web服务器
Altium Designer 9 学习笔记(二)制作完整的原理图并在此基础上导出PCB版图

首先先说下本次练习对象简单的光敏小夜灯 1 制作原理图按制图流程 1 1 新建工程及原理图 F N J B 一套连招创建PCB工程然后右键为新建的工程添加原理图文件完成后如下图所示 1 2 加载元器件并生成序号 1 2 1 加入电
excel转换pdf方法 (aspose.cells亲测有效)

AsposeUtils java package com lmp test utils import com aspose cells License import com aspose cells PdfSaveOptions impor
北航学长：DCIC 2021的算法方案讲解

作者阿水北京航空航天大学 Datawhale成员 DCIC 作为每年具有重要影响力的政府赛事除了高认可高奖金最重要的是开放了政府和企业的真实数据具有研究和落地价值但对于刚参加赛事的同学还是有难度的希望通过分享让更初学者也能
网管员牢记10种较为常见服务器管理错误

网络管理阶层的工作就是保证网络的正常工作从而使得职工们的工作不被打断可问题在于事物并非总是按照理想状况发展事实上经常会出现平地起风波的状况其间有许多原因这里我们只讨论10种较为常见的网管错误 1 UPS 不间断电源的使用问题某
Python+Requests-2-接口自动化脚本实现（虫师-Django接口测试实例）

编写脚本前分析项目架构需求 python脚本实现添加发布会信息的接口测试以邮件形式发送测试报告 1 新建一个case目录存放测试用例 2 新建一个config目录存放配置信息和读取配置信息 3 新建一个db fixture目录
vue项目打包部署到服务器

目录一打包项目二修改Nginx的配置三部署四开放端口号一打包项目 1 在 vue config js 文件中找到并修改主要是publicPath 与outputDir 两项配置若项目中有baseUrl 替换为publ
【嵌入式学习-C语言篇】 char & short & int 的使用

嵌入式学习 C语言篇 char short int 的使用三种数据类型常用场景智能家居网关协议中mac地址上报网关网关 Gateway 又称网间连接器协议转换器网关在传输层以上实现网络互连是最复杂的网络互连设备仅用于两个高
STM32 进阶教程 7 - C与C++混合编程

前言在嵌入式开发过程中经常会用到第三个芯片设备这些第三方的芯片提供的DEMO程序或驱动程序有时候是C 如果先前的系统用C语言写的就会出现点问题往往需先将C 的驱动程序自已手动改成C语言再用本节给大家介给一下如何在KEL MDK环境
html cgi改变字体颜色,在CGI文件中导致错误的HTML变量

我在从我的cgi文件中打印特定变量时出现问题我收到这个变量从我的网页中调用totalCost 然后尝试打印它但没有任何反应所有其他变量可以从网页成功接收并通过我的cgi文件打印到另一个网页上除了这一个我检查过大小写敏感但是没有
jQuery 入门教程(14): 添加HTML元素

使用jQuery可以方便的添加新的HTML元素下面的方法用于添加HTML元素 append 在指定的元素的尾部添加一个新内容 prepend 在指定的元素里前部添加新内容 after 在指定元素后添加新内容 before 在指定元素的前面

jQuery 入门教程(14): 添加HTML元素

jQuery 入门教程(14): 添加HTML元素 的相关文章

随机推荐

热门标签

jQuery 入门教程(14): 添加HTML元素的相关文章