测开之路一百零三:jquery元素和标签的插入与删除

Posted zhongyehai

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了测开之路一百零三:jquery元素和标签的插入与删除相关的知识,希望对你有一定的参考价值。

 

技术图片

 

标签内插入

技术图片

技术图片

 

标签外插入

技术图片

技术图片

 

给标签加标签

技术图片

技术图片

!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元素和标签的插入与删除的主要内容,如果未能解决你的问题,请参考以下文章

测开之路一百零一:jquery文字特效动画方法链

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

leetcode 简单 第一百零三题 最小移动次数使数组元素相等

测开之路一百五十二:基于jquery的ajax实现(loadgetajax)

测开之路一百五十五:jquery-validation前台数据验证

第一百零三天