JQ插入和移除HTML标签

版权声明:转载原创文章请以超链接形式请注明原文章出处,尊重作者,尊重原创!


恰饭广告




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .head{
            display: inline-block;
            width: 140px;
            padding: 15px;
            background: blue;
            color: white;
        }
    </style>
</head>
<body>
    <div id="panel">
        <span class="head">彬菌技术博客</span>
    </div>
    <div style="margin: 10px;">
        <button id="btn1">在head之前插入</button>
        <button id="btn2">在head之后插入</button>
        <button id="btn3">移除head元素</button>
    </div>
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn1").click(function(){
                $(".head").before("<span>我在:</span>");
            });
            $("#btn2").click(function(){
                $(".head").after("<span>进行前端技术开发学习</span>");
            });
             $("#btn3").click(function(){
                $(".head").remove();
            });
        });
    </script>
</body>
</html>  

原文链接:https://www.idaobin.com/archives/256.html

让我恰个饭吧.ヘ( ̄ω ̄ヘ)

支付宝 ——————- 微信
图片加载中图片加载中



恰饭广告

发表评论

邮箱地址不会被公开。 必填项已用*标注

2 + 3 =