<!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. CSS3 教程

    CSS3 教程 CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. 本教程向您讲解 CSS3 中的新特性. 开始学习 CSS3!  更多:http://www.runoob.com ...

  2. vsftpd for Anonymous Downloads on Ubuntu 16.04

    Introduction FTP, short for File Transfer Protocol, is a network protocol that was once widely used ...

  3. Android dialog圆角显示及解决出现的黑色棱角

    最近在开发一个天气预报的app,看到一个比较不错友情提示,如下:                怎么样,看起来比原始的dialog好看吧.好了,做法也许有很多,我介绍下我的做法吧, 首先,我第一个想到 ...

  4. 使用 Azure PowerShell 将 IaaS 资源从经典部署模型迁移到 Azure Resource Manager

    以下步骤演示了如何使用 Azure PowerShell 命令将基础结构即服务 (IaaS) 资源从经典部署模型迁移到 Azure Resource Manager 部署模型. 也可根据需要通过 Az ...

  5. 从golang-gin-realworld-example-app项目学写httpapi (五)

    https://github.com/gothinkster/golang-gin-realworld-example-app/blob/master/users/middlewares.go 中间件 ...

  6. iOS设计模式 - 外观

    iOS设计模式 - 外观 原理图 说明 1. 当客服端需要使用一个复杂的子系统(子系统之间关系错综复杂),但又不想和他们扯上关系时,我们需要单独的写出一个类来与子系统交互,隔离客户端与子系统之间的联系 ...

  7. Layer的shadow属性

    Layer的shadow属性 Layer中的阴影都是可以做动画处理的. - (void)viewDidLoad { [super viewDidLoad]; CALayer *layer = [CAL ...

  8. 浅析Linux操作系统是如何工作的（思维导图）

    SA***189 多任务计算机运转机制如下思维导图所示: 小结: Linux操作系统是一个在时钟的节拍下,各个模块紧密协作.密不可分的整体,而整个Linux系统都是建立在存储程序的基础之上,正是有了程 ...

  9. 《C++ Primer Plus》读书笔记之三—循环与关系表达式

    第五章 循环与关系表达式 1.表达式是值或者值与操作符的结合,每个C++表达式都有值.表达式到语句的转换只要加一个分号就可以完成.但是,反过来,从语句中删除分号,并不一定能将它转化成表达式. 2.前缀 ...

  10. [BZOJ 1972][Sdoi2010]猪国杀

    1972: [Sdoi2010]猪国杀 Time Limit: 1 Sec  Memory Limit: 64 MBSubmit: 364  Solved: 204[Submit][Status][D ...