jQuery动态创建html元素的常用方法汇总

Bertha 。 2022-07-15 08:21 253阅读 0赞

本文实例讲述了jQuery动态创建html元素的常用方法，在使用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>

发表评论取消回复

表情：

评论列表（有 0 条评论，253人围观）

还没有评论，来说两句吧...

相关阅读

相关 Python爬虫：selenium动态加载HTML的常用方法【汇总笔记】

![268eefd089c445c69f7e58f535df3981.png][] 前言 Selenium 是一个用于Web应用程序测试的[工具][Link 1]。

た入场券/ 2024年04月03日 06:57/ 0 赞/ 181 阅读

相关 jquery 常用代码段汇总

1.Jquery 对象和 dom 对象的逆转 / 如何判断一个对象时 jquery 对象还是 dom 对象不管是jquery对象还是dom对象，都可以互转的，如果

向右看齐/ 2023年12月26日 06:06/ 0 赞/ 163 阅读

相关 WebAPI-获取页面元素（标签）的常用方法汇总

通过 ID 获取元素语法： document.getElementById(id) 说明： `document` 表示当前文档对象，就是当前页面；每

爱被打了一巴掌/ 2023年06月12日 08:49/ 0 赞/ 118 阅读

相关利用ajax动态生成元素Jquery无法获取新创建的元素的解决方法

问题描述：当利用ajax技术动态创建元素时，jQuery无法获取到元素 ①创建元素 ajax代码： $.ajax({ url:

冷不防/ 2022年12月29日 01:47/ 0 赞/ 300 阅读

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

本文实例讲述了jQuery动态创建html元素的常用方法，在使用jQuery进行WEB程序设计的时候非常有用。分享给大家供大家参考。具体方法如下：一般来说，可以通过以下几

Bertha 。/ 2022年07月15日 08:21/ 0 赞/ 254 阅读

相关 jQuery动态创建html元素的常用方法使用心得

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

一时失言乱红尘/ 2022年07月13日 19:26/ 0 赞/ 236 阅读

相关 HTML5的常用元素

一、列表相关元素 <ul>：定义无序列表。 <ol>：定义有序列表。除了指定id、class、style等属性，还可以有几个特定的属性，例如

Dear 丶/ 2022年05月21日 13:36/ 0 赞/ 308 阅读

相关 html常用元素总结

一.HTML的基本结构一个最基本的HTML文件需要包括以下代码块中的内容: 1.<!DOCTYPE html>：该行与最后一行的</html>构成一对标签；它

叁歲伎倆/ 2022年02月03日 06:41/ 0 赞/ 377 阅读

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

在使用jQuery进行WEB程序设计的时候非常有用。分享给大家供大家参考。具体方法如下：一般来说，可以通过以下几种方式动态创建html元素： 1、使用jQuery创建元素

绝地灬酷狼/ 2021年10月29日 23:16/ 0 赞/ 668 阅读

相关 HTML常用标签汇总、CSS常用属性汇总

HTML标签汇总 <table style="width:750px"> <tbody> <tr> <td style="text-align:ce

末蓝、/ 2021年09月14日 02:04/ 0 赞/ 633 阅读