1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div class="c1">
  9.     <p>pppp</p>
  10. </div>
  11. <button>dd</button>
  12. <script src="jquery-3.3.1.min.js"></script>
  13. <script>
  14.     $('button').click(function () {
  15.         // 方式一：给div添加标签h1以及内容
  16.         $('.c1').append('<h1>wwwe</h1>');
  17.  
  18.         // 方式二：给div添加标签h1以及内容
  19.         var $ele=$('<h1></h1>');
  20.         $ele.html('hehh');
  21.         $ele.css('color','red');
  22.         $('.c1').append($ele)
  23.  
  24.     })
  25.  
  26. </script>
  27. </body>
  28. </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. ant-design里为了清空Modal中的值, modal 中值有缓存 ....

    处理列表中的编辑功能,发现有点爽,看的都是上次编辑后内容, 搜文档 也没说具体怎么清空旧的状态 网上搜了下,说给 moal 设置一个不同的key 试了,用这方式可以解决问题,  只要这个key是全新的 ...

  2. 一键清理 Nexus 中无用的 Docker 镜像

    现许多团队使用 Nexus 来管理 Docker 镜像,产品不断迭代,镜像仓库占用的磁盘空间也越来越大.由于 Nexus 的控制台并未提供批量操作镜像功能,清理镜像十分不便.本文分享一个清理 Nexu ...

  3. Java面试通关要点【问题汇总篇】

    基础篇 基本功: 面向对象的特征 final, finally, finalize 的区别 int 和 Integer 有什么区别 重载和重写的区别 抽象类和接口有什么区别 说说反射的用途及实现 说说 ...

  4. 效果CSS实现三角

      <view class="hd"></view>.hd {   content: "";   height: 16rpx;   wi ...

  5. Jquery使两个Div的滚动条同步滚动

    $("#div").scroll(function(){ $("#div1").scrollTop($(this).scrollTop()); // 纵向滚动条 ...

  6. 详解COM Add In的LoadBehavior及其妙用

     Office的所有COM Add In,包括用Shared Add In模板和VSTO Add In模板创建的,都会在注册表里面存储一些信息. 对于当前用户安装的Add In,以Excel为例,对应 ...

  7. OC文件操作1

    主要内容: 1)文件操作:对文件本身的操作(NSManager) 2)对文件内容的操作(NSHandle) 1.NSManager 创建一个单例的file manager的对象 //创建一个单例的fi ...

  8. ApplicationEventPublisher笔记

    ApplicationEventPublisher是ApplicationContext的父接口之一.这接口的作用是:Interface that encapsulates event publica ...

  9. @property 装饰器

    property() 函数作用于新式类,返回属性值. class C(object): def __init__(self): self._x = None def getx(self): print ...

  10. apache、nginx实现反向代理

    一.apache(不推荐): 代理80端口:a. 配置:b. 效果:c. 配置文件参考: ServerRoot "/etc/httpd" Listen 80 ProxyPass / ...