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

一时失言乱红尘 2022-07-13 19:26 163阅读 0赞

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>

运行效果如下图所示：  
![这里写图片描述][20149595822000.png_20148595922]  
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>

运行效果如下图所示：  
![这里写图片描述][20149595830110.png_20148595911]  
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>

运行效果如下图所示：  
![这里写图片描述][20149595841965.png_20148595857]

[20149595822000.png_20148595922]: /images/20220709/aa47d7df7eff4993b5da80eae0138c20.png
[20149595830110.png_20148595911]: /images/20220709/a03303dc52a544b3a8233e02c92c250b.png
[20149595841965.png_20148595857]: /images/20220709/e612d60adbd14979baeaf69ba78abcbc.png

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关 jQuery常用方法

[jQuery常用方法][jQuery] //找tag $("a"); //找到a的tag $("amyId"); //找到id為myId的a

妖狐艹你老母/ 2022年08月12日 13:58/ 0 赞/ 214 阅读

相关 Jquery常用方法

Attribute： $(”p”).addClass(css中定义的样式类型); 给某个元素添加样式 $(”img”).attr(\{src:”test.jpg”,al

超、凢脫俗/ 2022年08月11日 03:25/ 0 赞/ 231 阅读

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

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

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

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

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

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

相关 HTML5的常用元素

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

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

相关 JQuery常用方法

.prop() 调整元素属性 .html() 方法可以添加HTML标签和文字到元素，而元素之前的内容都会被方法的内容所替换掉。 :: em可以强调和重写文本 .text

素颜马尾好姑娘i/ 2022年04月15日 01:46/ 0 赞/ 267 阅读

相关 JQuery常用使用方法

1、JQuery获得相同ID的元素在Jquery中相同的ID号不能用$()获得，即使是$().each()也不能获得所有的ID相同的元素，只能获得第一个匹配的元素。

ゝ一纸荒年。/ 2022年04月15日 00:12/ 0 赞/ 305 阅读

相关 html常用元素总结

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

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

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

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

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