<!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. C#可遍历的集合

    public class Product { /// <summary> /// 自增ID /// </summary> public int ID { get; set; } ...

  2. 已有Web项目添加Maven支持

    IDE:MyEclipse 当我们在现有的Web开发项目中集成 Maven 的时候,需要修改以下几个地方: 1.将以下代码拷贝到工程根路径下的 .project 文件中的 <buildSpec& ...

  3. 【vue入门】日志demo，增删改查的练习（无vuex版本）

    安装 1. 确定电脑已装node和npm 出现版本号则说明电脑已经安装好node和npm2. 创建一个基于webpack的项目   3. 在项目里安装依赖 4. 运行 配置路由为了动态渲染各个页面的组 ...

  4. 一步一步pwn路由器之路由器环境修复&&rop技术分析

    前言 本文由 本人 首发于 先知安全技术社区: https://xianzhi.aliyun.com/forum/user/5274 拿到路由器的固件后,第一时间肯定是去运行目标程序,一般是web服务 ...

  5. unity材质球贴图滚动

       using System.Collections; using System.Collections.Generic; using UnityEngine; public class NewBe ...

  6. netstat 常用方法

    netstat简介 netstat是一个监控TCP/IP网络的非常有用的工具,它可以显示路由表,实际的网络连接以及每一个网络接口设备的状态信息,netstat用于显示与IP,TCP,UDP和ICMP协 ...

  7. 使用 ruamel.yaml 读写 yaml 文档

    官网链接: https://pypi.org/project/ruamel.yaml/ 1. 安装ruamel.yaml pip install ruamel.yaml 2. 准备yaml文件: Ch ...

  8. 泛型举例：List<T>与DateTable相互转换

    一. DataTable转换到List<T> /// <summary> /// TableToList /// </summary> public class T ...

  9. codeforces 497E Subsequences Return

    codeforces 497E Subsequences Return 想法 做完这题,学了一些东西. 1.求一个串不同子序列个数的两种方法.解一 解二 2.这道题 \(n\) 很大,很容易想到矩阵加 ...

  10. 解析Java对象的equals()和hashCode()的使用

    解析Java对象的equals()和hashCode()的使用 前言 在Java语言中,equals()和hashCode()两个函数的使用是紧密配合的,你要是自己设计其中一个,就要设计另外一个.在多 ...