在使用jQuery进行WEB程序设计的时候非常有用。分享给大家供大家参考。具体方法如下：

一般来说，可以通过以下几种方式动态创建html元素：

1、使用jQuery创建元素的语法
2、把动态内容存放到数组中，再遍历数组动态创建html元素
3、使用模版

1.使用jQuery动态创建元素追加到jQuery对象上。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  <title></title>

  <script src="Scripts/jquery-1.10.2.js"></script>

  <script type="text/javascript">

    $(function() {

      $('<input />', {

        id: 'cbx',

        name: 'cbx',

        type: 'checkbox',

        checked: 'checked',

        click: function() {

          alert("点我了~~");

        }

      }).appendTo($('#wrap'));

    });

  </script>

</head>

<body>

  <div id="wrap"></div>

</body>

运行效果如下图所示：

2.先把内容放到数组中，然后遍历数组拼接成html

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  <title></title>

  <script src="Scripts/jquery-1.10.2.js"></script>

  <style type="text/css">

    table {

      border: solid 1px red;

      border-collapse: collapse;

    }

    td {

      border: solid 1px red;

    }

  </style>

  <script type="text/javascript">

    $(function () {

      var data = ["a", "b", "c", "d"];

      var html = '';

      for (var i = 0; i < data.length; i ++) {

        html += "<td>" + data[i] + "</td>";

      }

      $("#row").append(html);

    });

  </script>

</head>

<body>

  <table>

    <tr id="row"></tr>

  </table>

</body>

</html>

运行效果如下图所示：

3.使用模版生成html

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

  <title></title>

  <script src="Scripts/jquery-1.10.2.js"></script>

  <script type="text/javascript">

    $(function () {

      var a = buildHTML("a", "我是由模版生成的", {

        id: "myLink",

        href: "http://www.baidu.com"

      });

      $('#wrap1').append(a);

      var input = buildHTML("input", {

        id: "myInput",

        type: "text",

        value: "我也是由模版生成的~~"

      });

      $('#wrap2').append(input);

    });

    buildHTML = function(tag, html, attrs) {

      // you can skip html param

      if (typeof (html) != 'string') {

        attrs = html;

        html = null;

      }

      var h = '<' + tag;

      for (attr in attrs) {

        if (attrs[attr] === false) continue;

        h += ' ' + attr + '="' + attrs[attr] + '"';

      }

      return h += html ? ">" + html + "</" + tag + ">" : "/>";

    };

  </script>

</head>

<body>

  <div id="wrap1"></div>

  <div id="wrap2"></div>

</body>

运行效果如下图所示：

jQuery动态创建html元素的常用方法汇总的更多相关文章

  1. jquery动态创建页面元素

    jquery用$()方法动态创建一个页面元素,例如: var $div=$("<div title='动态创建页面元素'>欢迎创建一个新的div</div>" ...

  2. 基于jQuery动态创建html元素

    在做web前端开发的时候,经常遇到一些数据多少或则类型不能在运行之前就确定下来的情况,此时,数据的展示,就要借助于动态创建html元素来展示了. 常见的动态创建HTML元素的方式,有如下几种,大体都差 ...

  3. jquery 动态创建的元素，绑定事件无效之解决方法

    今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...

  4. javascript和jquery动态创建html元素

    1.javascript创建元素 创建select var select = document.createElement("select");        elect.opti ...

  5. jQuery 绑定事件到动态创建的元素上

    在进入主题之前,我们先来看一个前台页面经常用到的功能:点击页面输入框时自动选择其中文本. 很容易想到利用输入框的focus事件,当输入框获得焦点时,再调用jQuery的select()方法. Okay ...

  6. JavaScript 、jQuery动态创建元素的关键字~

    JavaScript动态创建元素: 1.创建元素  如:a 标签 var alink= document.createElement("a"); 2.j添加元素属性 alink.h ...

  7. 用jQuery绑定事件到动态创建的元素上

    jQuery最常用的一个功能就是对DOM的操作,与之相关的比如对事件的绑定和Ajax动态内容加载.当我们绑定事件到Ajax load回来的内容上或其他动态创建的元素上时会发现事件没响应,和你预想的结果 ...

  8. 解决jquery动态创建元素绑定事件失效问题

    存在问题 在我们使用jquery动态创建元素后往往会遇到一些问题,如: 给.button按钮绑定了点击时间,执行alert:(1); 点击事件代码如下: <script>$("# ...

  9. 动态创建dom元素

    效果图如上所示: 思维nav:就相当于qq空间发表动态(说说),在输入框里输入内容,点击提交(发表),内容就呈现在下面的动态栏里.我这里是准备写一个招聘的app,大家可以随便想象下哪些情况会遇到动态创 ...

随机推荐

  1. 企业级本地yum源配置方案详解

    因目前企业生产网络禁止联网,对于使用Linux的我们来说,非常不方便,想要使用yum源都很困难,挂dvd又不能完全满足要求,所以自建一个企业级的yum源,定时从公网同步到本地,然后生产网络直接配置在本 ...

  2. vue 安装 ‘node-sass’ 运行报错：ERROR in Cannot find module 'node-sass'

    好像是由于cnpm安装导致.执行下面的安装代码,或者使用npm 安装node-sass cnpm install node-sass@latest

  3. BZOJ 2277 strongbox （gcd）

    题意 有一个密码箱,0到n-1中的某些整数是它的密码. 且满足,如果a和b都是它的密码,那么(a+b)%n也是它的密码(a,b可以相等) 某人试了k次密码,前k-1次都失败了,最后一次成功了. 问:该 ...

  4. sublime 分屏显示 不是插件

    点击 view--layout --- 选择几屏即可(single / columns 2 ....) 快捷键  Alt + Shift + 1/2/3/4  分别对应1 ,2,3,4屏 如何把一个文 ...

  5. 前端开发规范：命名规范、HTML 规范、CSS 规范、JavaScript 规范

    一个好的程序员肯定是要能书写可维护的代码,而不是一次性的代码,怎么能让团队当中其他人甚至一段时间时候你再看你某个时候写的代码也能看懂呢,这就需要规范你的代码了.我是有一点强迫症的人,上周我们后端给我了 ...

  6. 四十.创建Redis集群 管理集群

    环境准备 准备 6台(51-56) redis服务器  以默认配置运行redis服务即可  一.创建Redis集群 1.启用集群功能( 51-56 都要配置) ]#  netstat -antupl ...

  7. [Luogu] 奶酪

    https://www.luogu.org/problemnew/show/3958 #include <iostream> #include <cstdio> #includ ...

  8. [CMS漏洞]EmpireCMS_V7.5的一次审计【转载】

    i春秋作家:Qclover 原文来自:EmpireCMS_V7.5的一次审计 0x01 概述 最近在做审计和WAF规则的编写,在CNVD和CNNVD等漏洞平台寻找各类CMS漏洞研究编写规则时顺便抽空对 ...

  9. vue tab嵌入iframe切换不刷新，相对完整的方案

    说到Vue的简单.便捷.高效,谁用谁喜欢,自然企业应用也来玩一把,三大经典组件:树控件,网格控件,选项卡控件: 本章先说选项卡tab控件的嵌入iframe. 本次主要解决以下问题: 1.tab控件混合 ...

  10. 本周JavaScript学习小结

    应组长杨老师号召,写个js阶段性学习小结. emmm这周学了Linux进程通讯,学正则表达式尝试完成第一次编程作业,中秋还去平潭露营(所以...js学得很少hhh). 现在还处于感性认识阶段,浏览了一 ...