标签内插入

标签外插入

给标签加标签

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素和标签插入</title>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<h1>元素和标签插入</h1>
<button id="btn">操作</button>
<button id="btn2">操作2</button>
<div class="container">
    <p>第一个段落</p>
    <p>第二个段落</p>
    <span>这是span标签</span>
</div>

</body>
</html>
<script>
    $(document).ready(function () {
        //给标签加标签
        $("#btn2").click(function () {
            $("span").wrap("<strong style='color: blue'></strong>")
        });

        $("#btn").click(function () {

            // //标签外
            // $('p').before('<a herf="#">这是前面插入</a>>'); //在前面插入
            // $('p').after('<a herf="#">这是后面插入</a>>'); //在后面插入

            // //标签内
            // $('p').prepend('<a herf="#">这是前面插入</a>>');  //在前面插入
            // $('p').append('<a herf="#">这是后面插入</a>>');  //在后面插入

        });

    });
</script>

删除

清空内容，保留标签

删除标签和内容

删除两边的标签

删除属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<h1>删除元素</h1>
<button id="btn">操作</button>
<div class="container">
    <p style="color: blue">这是div标签下的第p标签</p>
</div>
<strong><a href="https://www.baidu.com/">这是外侧有strong标签的a标签</a></strong>

</body>
</html>
<script>
    $(document).ready(function () {
        $("#btn").click(function () {
            //删除属性
            $("p").removeAttr("style");

            // //删除两边的标签
            // $("a").unwrap();

            // //删除标签和内容
            // $("p").remove();

            // //点击时清空内容，保留标签
            // $(".container").empty();

        });
    });
</script>

测开之路一百零三：jquery元素和标签的插入与删除的更多相关文章

  1. 测开之路一百零二：jquery元素操作

    jquery对元素操作,获取/替换文本(.text()).html(.html()).属性(.attr()).值(.val()) html代码 text() 根据标签获取文本值 同一个标签下筛选明细 ...

  2. 测开之路一百零四：jquery操作样式

    jquery操作样式 添加样式.删除样式 切换样式 css("属性","值") css("属性","值"), 修改多个 ...

  3. 测开之路一百零一：jquery文字特效、动画、方法链

    文字特效 html内容 1.卷起/展开 2.隐藏/显示 3.淡入淡出 <!DOCTYPE html><html lang="en"><head> ...

  4. 测开之路一百零六：bootstrap布局

    可以在html的head里面加一些说明 <meta http-equiv="X-UA-Compatible" content="IE=edge">& ...

  5. 测开之路一百零九：bootstrap列表

    bootstrap列表 引入bootstrap标签 原本的效果 水平显示 bootstrap列表 列表组合框 在组合框后面加备注 突出显示 a标签列表 <!DOCTYPE html>< ...

  6. 测开之路一百零七：bootstrap排版

    引入bootstrap和jquery 标题 对齐 正文强调 引言 <!DOCTYPE html><html lang="en"><head> & ...

  7. 测开之路一百零五：bootstrap的两种引用方式

    一:下载到本地引用: 3.3.7版本:https://getbootstrap.com/docs/3.3/getting-started/#download 下载后解压到本地项目中引用 第二种,cdn ...

  8. 测开之路一百五十二：基于jquery的ajax实现之load、get、ajax

    ajax除了用原生的js实现之外,也可以使用jquery实现,而且用jquery更方便 看一个简单的示例,保留上一篇的content路由和html,实现上一篇一样的功能,点击获取内容,局部刷新 准备一 ...

  9. 测开之路一百三十八：会话管理之session

    session管理和使用,需要用到flask的session模块和设置安全码:app.secret_key 比如列表页和编辑功能只能给admin用 列表页 编辑页 添加session 登录成功时,把u ...

随机推荐

  1. spark数据结构之RDD

    学习spark,RDD是一个逃不过去的话题,那么接下来我们看看RDD 1.什么是RDD? RDD叫做弹性分布式数据集,是Spark中最基本的数据抽象,代表一个不可变.可分区.里面元素可以并行计算的集合 ...

  2. mesg - 调节用户终端的写访问权

    总览 (SYNOPSIS) mesg [y|n] 描述 (DESCRIPTION) Mesg 控制 其他用户 对 你的终端 的 访问能力. 典型用途 是 允许 或 禁止 其他用户向 你的终端 输出 数 ...

  3. Ant Design -- 图片可拖拽效果，图片跟随鼠标移动

    Ant Design 图片可拖拽效果,图片跟随鼠标移动,需计算鼠标在图片中与图片左上角的X轴的距离和鼠标在图片中与图片左上角的Y轴的距离. constructor(props) { super(pro ...

  4. MapReduce单机提交（待稿）

    MR 提交方式源码 提交方式: 1,开发-> jar -> 上传到集群中的某一个节点 -> hadoop jar ooxx.jar ooxx in out 2,嵌入[linux,wi ...

  5. Comet OJ - Contest #2 C题 言论的阴影里妄想初萌

    题目描述 Takuru 是一名能力者,他在地震时获得了念力致动的能力.所以他经常用自己的能力去干一些奇奇怪怪的事情. 有一天他获得了一张 nn 个点的无向完全图,之后他使用了能力,导致这张图的 \fr ...

  6. ubuntu 安装nvidia driver

    错误的命令:sudo apt-get install nvidiar-430好多教程都是这样 sudo apt-get install nvidia-driver-430  很奇怪这个命令变成这样 h ...

  7. <authentication> 元素

    <authentication> 元素 配置 ASP.NET 身份验证支持.该元素只能在计算机.站点或应用程序级别声明.如果试图在配置文件中的子目录或页级别上进行声明,则将产生分析器错误信 ...

  8. docker常用命令及操作

    1).镜像操作 操作 命令 说明 检索 docker search 关 键 字 eg:docker search redis 我们经常去docker hub上检索镜像的详细信息,如镜像的TAG. 拉取 ...

  9. 这两天老是有兄弟问到Vue的登陆和注册，登陆成功留在首页，没有登录回到登录页面，现在我用最简单实用的方法实现（两分钟技就看懂）

    其实登录注册,并且登录一次保持登录的状态,是每个项目都需要实现的功能. 网上也有很多的方法,不过,不是通俗易懂,在这里说一下我自己的方法,非常简单实用核心就是用localStorage存.取数据,这样 ...

  10. Win10离线安装.NET Framework 3.5的方法补充（附cab格式离线安装包下载） - 转载

    MS酋长很早以前已经分享了<Win10离线安装.NET Framework 3.5的方法技巧>,同时分享了exe格式的.NET Framework 3.5离线安装包下载地址.但有部分网友反 ...