动态生成HTML元素的方法有三种：

第一种：document.createElement()创建元素，再用appendChild( )方法将元素添加到指定节点

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

 <div id="main">

     <span id="login"></span>

 </div>

 </body>

 <script>

     var link = document.createElement('a');

     link.setAttribute('href','#');

     link.setAttribute('id','login');

     link.style.color = 'green';

     link.innerHTML = '登录';

     var main = document.getElementById('main');

     main.appendChild(link);

 </script>

 </html>

第二种：使用innerHTML直接将元素添加到指定节点

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

 <div id="main">

     <span id="login"></span>

 </div>

 </body>

 <script>

     var link = document.createElement('a');

     //使用innerHTML将元素直接添加到指定节点

     main.innerHTML = "<a href='#' id='login' style='color: red;'>登录</a>";

 </script>

 </html>

第三种：jQuery创建节点

jQuery中创建DOM对象，使用jQuery的工厂函数$( )完成，格式如下：

$(html)，$(html)会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后再返回到前台页面上。

jQuery中将创建的节点插入文本中，使用append( )等方法，jQuery中插入节点方法有：

1. append()：向每个匹配的元素内部追加内容

2.appendTo()：将所有匹配的元素追加到指定元素中，颠倒了常规的$(A).append(B)方法，不是将B追加到A中，而是将A追加到B中

3.prepend()：向每个匹配的元素内部前置内容

4.prependTo()：将所有匹配的内容前置到指定的元素中，与prpend( )方法颠倒

5.after()：向每个匹配的元素之后插入内容

6.insertAfter()：将所有匹配的元素插入到指定元素的后面,与after()方法颠倒

7.before()：在每个匹配的元素之前插入内容

8.insertBefore()：将每个匹配的元素插入到指定内容之前，与before()方法颠倒

 <!DOCTYPE html>

 <html lang="en">

 <head>

    <meta charset="UTF-8">

    <title></title>

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

    <style type="text/css">

        .newStyle{

             color:red

        }

    </style>

 <script>

    $(function(){

    var link=$('<a href="#" id="link" style="color:pink">登录</a>');

    $('#main').append(link).addClass("newStyle");

    })

 </script>

 </head>

 <body>

    <div id="main"></div>

 </body>

 </html>

借鉴文档出处：https://blog.csdn.net/fredaouyang/article/details/56481458

动态生成html元素并为元素追加属性的更多相关文章

  1. v-if案例解析（element-ui form-item 结合 v-if 动态生成rule规则\表单元素，表单无法验证问题剖析 ）

    fire 读在最前面: 1.此文章衔接Vue 虚拟Dom 及 部分生命周期初探,相关整体知识点请先阅读后再继续本文阅读 问:当v-if为true时,会重新渲染相关dom节点吗? <child v ...

  2. Java动态生成类以及动态添加属性

    有个技术实现需求:动态生成类,其中类中的属性来自参数对象中的全部属性以及来自参数对象properties文件. 那么技术实现支持:使用CGLib代理. 具体的实现步骤: 1.配置Maven文件: &l ...

  3. 利用runtime动态生成对象？

    利用runtime我们能够动态生成对象.属性.方法这特性 假定我们要动态生成DYViewController,并为它创建属性propertyName 1)对象名 NSString *class = @ ...

  4. jquery动态生成的元素添加事件的方法

    动态生成的元素如果要添加事件,要写成 $(document).on("click", "#txtName", function() { alert(this.v ...

  5. JS动态生成的元素，其对应的方法不响应（比如单击事件，鼠标移动事件等）

    主要原因:在页面给元素注册点击事件的时候[ $(function () {  XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...

  6. jQuery1.9之后使用on()绑定 动态生成元素的 事件无效

    来自互联网: 需要绑定a的父级元素(此元素必须为静态元素,不是后来动态生成的),然后设定on()方法的selector参数才行: $('p').on('mouseenter', 'a', functi ...

  7. 动态生成元素动作绑定，jquery 1.9如何实现

    1.7后增加了 live()1.9后被移除了 网上说可以用 on() 代替 可以实际在动态生成元素上绑定动作,没效果,求解绝方法(用低版本的jQuery这种方法,求别说..) 答: 之前有老兄回答过类 ...

  8. JQuery中动态生成元素的绑定事件（坑死宝宝了）

    今天在做项目的时候,遇到了一个前端的问题,坑了我好长时间没有解决,今天就记录于此,也分享给大家. 问题是这样的,首先看看我的界面,有一个初始印象: 下面是操作列所对应的JS代码: { "da ...

  9. JQuery使用on绑定动态生成元素时碰到的问题

    今天在写界面时,希望对一些由JS代码动态添加的html标签进行事件绑定,使用了jquery 1.6+才提供的on函数.我的JQ版本是1.9.2. 以下这段代码是动态生成的. <div class ...

随机推荐

  1. Partition Array into Disjoint Intervals LT915

    Given an array A, partition it into two (contiguous) subarrays left and right so that: Every element ...

  2. 基于tomcat的solr环境搭建（Linux）

    ♥♥  solr是基于lucene的一个全文检索服务器,提供了一些类似webservice的API接口,用户可以通过http请求solr服务器,进行索引的建立和索引的搜索.索引建立的过程:用户提交的文 ...

  3. 软件测试基础Ⅲ（osi7层协议，测试模型，LoadRunner组件，软件质量模型）

    osi7层开放式系统互连网络模型 1.物理层:主要定义物理设备标准,如网线的接口类型.光纤的接口类型.各种传输介质的传输速率等.它的主要作用是传输比特流(就是由1.0转化为电流强弱来进行传输,到达目的 ...

  4. 【UI测试】－－规范性

  5. 团队-Python 爬取豆瓣电影top250-成员简介及分工

    姓名:周鑫 班级:软件6班 团队名称:咣咣踹电脑 擅长:Python,java 分工:编写数据库

  6. 区间DP初探 P1880 [NOI1995]石子合并

    https://www.luogu.org/problemnew/show/P1880 区间dp,顾名思义,是以区间为阶段的一种线性dp的拓展 状态常定义为$f[i][j]$,表示区间[i,j]的某种 ...

  7. js生成条形码插件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 树状数组（hdu-4325，hdu-1166，pat-1057）

    1.hdu-4325 题意:插花,要么给出插花的范围,要么查询某个点的花的个数. 思路:通过更新,每次更新区间S到T的数值,表插入花(这一点一开始没想到), 要么查询某个点的花的数目. (与以往单纯的 ...

  9. 委托构造函数(c++11)

    1.概念 1)委托构造函数也是构造函数,它也有形参列表,它将实参传递给其他的构造函数来初始化类对象,像是把自己的一些(或者全部)构造职责委托给其他构造函数一样

  10. Android 全局搜索条写成自定义控件-曹永思

    图文: 1.Android 自定义控件的布局文件 2.编写Android 自定义控件的要处理的逻辑代码(曹永思) 3.在调用自定义控件的 Activity的布局文件中调用Android 称之为控件,控 ...