<!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. JS 对html标签的属性的干预以及JS 对CSS 样式表属性的干预

      -任何标签的任何属性都可以修改! -HTML里是怎么写, JS就怎么写   以下是一段js 作用于 css 的 href的 代码   <link id="l1" rel= ...

  2. (C#) 多线程访问探讨，如果保证线程安全？

    先抛出几点疑问: 1. 多个线程同时访问同一个“值类型变量“(value type, stored in stack), 如果保证安全访问? 2. 多个线程同时访问同一个“引用类型变量“(refere ...

  3. Android BitmapDrawable

    功能:显示缩略图,大小为40*40 //通过openRawResource获取一个inputStream对象 InputStream inputStream = getResources().open ...

  4. MyEclipse 2017/2018 安装与破解 图文教程

    SSM 框架-02-MyEclipse 2017/2018 安装与破解 现在在学J2EE,然后使用的工具就是 MyEclipse,现在就抛弃 Eclipse 了,我就不多说它俩的区别了,但是 MyEc ...

  5. HandlerThread使用

    HandlerThread 是一个包含 Looper 的 Thread,我们可以直接使用这个 Looper 创建 Handler.  1.HandlerThread 源码 public class H ...

  6. 【眼见为实】自己动手实践理解数据库READ COMMITTED && MVCC

    [READ COMMITTED] 首先设置数据库隔离级别为读已提交(READ COMMITTED): set global transaction isolation level READ COMMI ...

  7. 理解ASP.NET 5运行时命令：DNVM, DNX, 和DNU

    ASP.NET 5 引入了一个新型的运行时,让我们可以现场交付模式组合式构建应用程序,而不依赖于宿主机上的.NET框架.这种新模式为我们提供了命令行工具(DNVM.DNX.DNU)用于管理我们的.ne ...

  8. linux_day3

    1.grep与find的区别? grep是查找文件内的字符而find则是查找文件 2.显示/etc/passwd中以nologin结尾的行 3. 输入ip addr命令后,过滤出包含ip的行 ip a ...

  9. 对数损失函数(Logarithmic Loss Function)的原理和 Python 实现

    原理 对数损失, 即对数似然损失(Log-likelihood Loss), 也称逻辑斯谛回归损失(Logistic Loss)或交叉熵损失(cross-entropy Loss), 是在概率估计上定 ...

  10. 实战：Nginx如何让用户通过用户名和密码认证访问WEB站点

    有时我们会有这么一种需求,就是你的网站并不想提供一个公共的访问或者某些页面不希望公开,我们希望的是某些特定的客户端可以访问.那么我们可以在访问时要求进行身份认证,就如给你自己的家门加一把锁,以拒绝那些 ...