<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div class="c1">

    <p>pppp</p>

</div>

<button>dd</button>

<script src="jquery-3.3.1.min.js"></script>

<script>

    $('button').click(function () {

        // 方式一：给div添加标签h1以及内容

        $('.c1').append('<h1>wwwe</h1>');

        // 方式二：给div添加标签h1以及内容

        var $ele=$('<h1></h1>');

        $ele.html('hehh');

        $ele.css('color','red');

        $('.c1').append($ele)

    })

</script>

</body>

</html>

jQuery添加标签实例的更多相关文章

  1. 添加标签2 jquery 和JS

    TAG添加标签 做了个方法方便调用 一.JS版本 <!DOCTYPE html> <html lang="en"> <head> <met ...

  2. jQuery输入框回车添加标签特效

    效果如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  3. JQuery添加删除标签

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <script src= ...

  4. jQuery操作标签

    jQuery操作标签 样式操作: 对标签的样式进行修改,那么操作样式的方法是什么? 样式类: addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类名 ...

  5. JS添加节点方法与JQuery添加节点方法的比较及总结

    原生JS添加节点方法与JQuery添加节点方法的比较及总结   一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div ...

  6. Jquery 添加插件

    原文:http://www.iteye.com/topic/545971 jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法 ...

  7. jQuery对标签、类样式、值、文档、DOM对象的操作

    jquery的标签属性操作 使用attr()方法对html标签属性进行操作,attr如果参数是一个参数,表示获取html标签的属性值,如果是两个参数则是设置标签属性名以及对象的属性值 .prop()适 ...

  8. JS添加标签效果

    JS添加标签效果 在豆瓣网上添加自己的标签是一种常见的效果,今天也就做了一个简单的demo.由于时间的问题 我不多原理,大家可以试着操作几遍就能明白其中的原理了. JSFiddle的效果如下: 点击我 ...

  9. jQuery对象合并、jQuery添加静态方法、jQuery添加DOM实例方法

    实例效果: 代码演示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

随机推荐

  1. .NET 跨平台服务端资料

    OWIN Web API:  http://www.asp.net/web-api/overview/hosting-aspnet-web-api/use-owin-to-self-host-web- ...

  2. Mybatis学习第二天——mapper的动态代理

    传统的Dao层开发通过接口与实现类的方式,Mybatis中通过mapper动态代理是需要定义接口. 1.传统Dao层封装 那么可以将公共资源提取出来,剩余的封装成方法来实现.下面是UserDaoImp ...

  3. 软工读书笔记 week2

    <程序员修炼之道>这本书后面一部分则是更深入.更具体.更细致地就程序员应该注意的事项做一些讨论,书中说的很多在过去的经历中都有较深的体会,同时也给了我很多启发.以下是一些我感悟较深的点: ...

  4. 爬虫IP被禁的简单解决方法——切换UserAgent

    [转载]Python爬虫之UserAgent 用到的库 https://github.com/hellysmile/fake-useragent

  5. 《Java并发编程实战》文摘

    更新时间:2017-06-03 <Java并发编程实战>文摘,有兴趣的朋友可以买本纸质书仔细研究下. 一 线程安全性 1.1 什么是线程安全性 当多个线程访问某个类时,不管运行时环境采用何 ...

  6. [翻译] ATTutorialController

    ATTutorialController https://github.com/AfonsoTsukamoto/ATTutorialController A simple to use tutoria ...

  7. [EffectiveC++]item12：copy all parts of an object

    在小书C++中,4.2.2 派生类的构造函数和析构函数的构造规则(103页) 在定义派生类对象时,构造函数执行顺序如下: 基类的构造函数 对象成员的构造函数 派生类的构造函数.

  8. Python 执行命令行操作。

    os.system os.popen() commands.getstatusoutput(cmd) (status, output) = commands.getstatusoutput('cat ...

  9. DIY简单功能的torrentkitty种子爬虫

    过完年回公司比较无聊,一不小心看到微博里美尤莉娅的图片,惊为天人,有图为证!!! 百度之原来这货以前叫小泉彩,貌似动了几个小手术换了个马甲重新出道了.你拍AV你家里知道么?.于是乎下了几个种子看了下, ...

  10. KVO 的进一步理解

    这篇文章讲述了KVO的深入理解 http://blog.csdn.net/kesalin/article/details/8194240 对kvo有了更深入的理解 如下连接的文章讲述了kvo接口的一些 ...