jQuery动态生成html元素的几种方法

最新推荐文章于 2024-06-15 20:48:16 发布
最新推荐文章于 2024-06-15 20:48:16 发布
阅读量8.2k 收藏 4
点赞数 2
分类专栏： jQuery 文章标签： jQuery

本文实例讲述了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() {
      vardata = ["a","b","c","d"];
      varhtml = '';
      for(vari = 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() {
      vara = buildHTML("a","我是由模版生成的", {
        id:"myLink",
        href:"http://www.baidu.com"
      });
  
      $('#wrap1').append(a);
  
      varinput = 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;
      }
      varh = '<'+ tag;
      for(attr inattrs) {
        if(attrs[attr] === false)continue;
        h += ' ' + attr + '="'+ attrs[attr] + '"';
      }
      returnh += html ? ">"+ html + "</"+ tag + ">": "/>";
    };
  </script>
</head>
<body>
  <div id="wrap1"></div>
  <div id="wrap2"></div>
</body>


joe_dev
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
小白项目笔记一：jQuery动态加载html到指定div
Yangsijie98的博客
04-30 2046
第一篇博客，完全是写项目的时候做的笔记。方法一：load()方法用法：$('选择器').load(url, [data], [callback]);参数：url: 需要导入文件的地址，可以是html，也可以是动态的脚本文件data：参数（可选）callback：回调，一般写回掉方法被加载html文件部分代码 a.html：&lt;html&gt; &lt;body&gt; &lt;di...
利用JQuery动态生成html元素
Nuomizhende45
11-22 429
JQuery动态操作htmlAPI介绍 JQuery官方文档中动态对html添加元素有如下四个方法： append() - 在被选元素的结尾插入内容 prepend() - 在被选元素的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容 具体是什么效果可以自己去试一试，链接如下：http://www.w3school.com.cn...
jQuery学习教程，写更少的代码,做更多的事情（二）
最新发布
2401_85124119的博客
06-15 901
为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。前端面试题汇总JavaScript性能linux。
jq替换html动画效果,Jquery动态替换div内容及动态展示的方法
weixin_39639260的博客
06-03 233
本文实例讲述了Jquery动态替换div内容及动态展示的方法。。具体分析如下：一、问题：项目中需要在后台拼接html然后在前台通过ajax展示到div中：代码如下:sys_ajaxGet("/dynamic/default.do?method=show", {guid:guid},function(json){//这里可以正确的展示html内容alert(json.htmlContent);$("...
jquery事件对Html网页动态生成的元素失效
S.G.的JAVA学习园地
11-06 1918
在网页中有几个a标签，一部分静态写在html中，一部分则是动态生成，动态生成的元素点击事件失效
jquery动态添加元素无法提交解决方案
Evan's learning log
11-06 377
昨天写了一个页面，里面涉及到动态的创建和修改表单控件（form controls），用到的修改添加元素的方式为jquery方法为append，和replaceWith方法，凡是原有的控件后台都可以获取到值，凡是动态改变的元素，都无法获取值，这些控件当然都包含了name属性，但无论如何检查后台就是获取不到值。 提交方法用的jquery的post方法，表单表单元素通过seri...
jQuery动态创建html元素的常用方法汇总
12-11
一般来说，可以通过以下几种方式动态创建html元素： 1、使用jQuery创建元素的语法 2、把动态内容存放到数组中，再遍历数组动态创建html元素 3、使用模版 1.使用jQuery动态创建元素追加到jQuery对象上。 <meta...
jquery 给动态生成的标签绑定事件的几种方法总结
10-18
以下是对jQuery给动态生成的标签绑定事件的几种方法的详细解析： 1. **使用`.on()`方法** `.on()`方法是jQuery 1.7引入的，它是`.bind()`, `.live()`, `.delegate()`等方法的增强版，特别适合处理动态生成的元素...
jQuery控制TR显示隐藏的几种方法
10-25
在本文中，我们将深入探讨使用jQuery来控制TR显示隐藏的几种方法。 首先，最常见的方法是通过ID来控制。这种方法适用于在HTML生成时为每个需要控制的TR元素分配唯一的ID。例如： ```html 这行不隐藏 这行要隐藏 这...
Jquery在线生成二维码.rar
06-30
这个“Jquery在线生成二维码.rar”压缩包包含了一种利用jQuery实现的在线二维码生成方案，使得开发者可以方便地在网页上集成二维码生成功能。下面将详细介绍这个主题中的相关知识点。 首先，我们需要理解二维码...
jQuery动态文字随机显示特效代码
03-20
在jQuery中，动态文字随机显示通常是通过选择器选取HTML元素，然后通过定时器改变元素的内容来实现的。 1. **基本步骤：** - **引入jQuery库**：确保页面中已经包含了jQuery库，可以使用CDN链接或本地文件。 - **...
动态创建的 HTML 控件提交后数据丢失问题及解决
weixin_30404405的博客
10-22 316
最近在做的一个B/S项目中需要绘制报表, 由于很多报表的表头非常复杂,, 而且许多列都是动态创建的,用DataGrid 实现起来非常麻烦. 考虑了一下, 所有的报表都用 XML + XSLT 动态创建, 虽然 XSLT 的语法有些累赘, 并且有很多先天的不足, 但是整体看来着实非常方便。40多张报表, 大概2天半就写完了。 用户输入的一些表单由于也是报表的这番形式，一时兴起，全部都用 XM...
jquery动态生成html代码绑定事件
G11176593的博客
11-10 521
是不是很简单,这里选择作为父元素调用on方法绑定click事件,这样父元素下的所有元素都绑定了click事件,有时候并不需要所有的都绑定,那怎么办？//这里我每点击增加一次会在最后增加5行李健i,我现在要让所有的都绑定click事件(包括动态生成的)$(".h3").on("click","h3",{foo:"文本:"},function(event){h += "李健"+i+i+"";
如何把一个网页生成一个快捷方式在桌面?_如何写一个在WEB网页中调用以太坊智能合约的DAPP...
weixin_39883670的博客
12-05 260
在【使用web3调用智能合约的简单例子】中，使用的是Nodejs来调用智能合约，Nodejs适合做服务器端的应用。如何在WEB网页中调用智能合约，其实方法类似，同样是使用web3.js库。网页版例子的运行效果如下图所示，更加的直观。网页版的例子，同样的为了简单起见，仍旧直接使用Remix自带的Storage.sol合约例子，就是简单的存储和获取一个整数数值。前两个步骤 【1.编写智能合约】 和 【...
通过jQuery来输出html代码的技巧
I'm LINKSINKE
11-01 8679
通过jQuery来输出html代码的技巧 形式一：直接输出标签元素 1.采用转义符号 var form1 = "<form id=\"myform\" method=\"post\">" +"<input type=\"text\" name=\"uname\" style=\"height:20px;width:100%;\" />"
动态生成HTML元素并为元素追加属性
热门推荐
fredaouyang的博客
02-22 1万+
动态生成HTML元素的方法由三种： 第一种：document.createElement()创建元素，再用appendChild( )方法将元素添加到指定节点; 添加a元素： var link = document.createElement('a'); link.setAttribute('href','#'); li
查询页面html中有没有该元素
08-30
### 回答1： 好的，我来回答您的问题。 如果您想在 HTML 页面中查找某个元素，可以使用浏览器提供的开发者工具来检查 HTML 页面的源代码。在大多数现代浏览器中，可以通过按 F12 或使用浏览器菜单中的“开发者工具”选项来打开该工具。 一旦您打开了开发者工具，可以使用其“元素”选项卡来查找页面中的元素。您可以使用鼠标悬停在页面上的不同元素上，开发者工具会显示该元素的 HTML 代码。如果您想要查找某个具体的元素，可以使用开发者工具的搜索功能。 如果您发现页面中确实没有某个元素，可能有以下几种情况： 1. 该元素确实不存在于页面中，这可能是因为页面作者没有添加该元素或者该元素被动态生成并且当前未出现在页面中。 2. 该元素可能存在于页面中，但是由于样式或布局问题而无法看到。您可以使用开发者工具的“样式”选项卡来查看元素的样式属性并尝试更改这些属性来看到元素。 希望这能帮到您，如果您还有其他问题，请随时问我。 ### 回答2： 要查询一个html页面中是否存在某个元素，可以通过使用编程语言中的相关DOM操作函数来实现。以下是一个简单的方法： 1. 使用编程语言中的HTML解析库，如Python中的BeautifulSoup或JavaScript中的jQuery，将html页面加载进来。 2. 使用DOM操作函数，如getElementById、getElementsByTagN a me、querySelector等，来获取特定元素或元素集合。 3. 判断所需元素是否存在。对于Python中的BeautifulSoup，可以使用if判断语句来检测是否找到了目标元素。对于JavaScript中的jQuery，可以使用length属性来判断获取到的元素集合的长度是否大于零。 以下是一个使用Python的BeautifulSoup库来查询一个元素的示例代码： ```python from bs4 import BeautifulSoup def check_element(html, element_id): soup = BeautifulSoup(html, 'html.parser') # 加载html页面 element = soup.find(id=element_id) # 获取特定元素 if element: # 判断是否找到了目标元素 return True else: return False ``` 其中，html参数为要查询的html页面，element_id参数为要查询的元素的id。调用check_element函数后，返回值为True表示存在该元素，返回值为False表示不存在该元素。 当然，根据不同的编程语言和库，具体的查询方法会有所差异，以上提供的是一种常见的方法供参考。 ### 回答3： 查询页面HTML中是否存在某个元素，可以使用JavaScript中的document对象的相关方法来实现。 首先，可以使用document对象的getElementById()方法来根据元素的id属性值来获取该元素。如果返回的结果不为null，则表示页面中存在该元素。 其次，可以使用document对象的querySelector()方法来使用CSS选择器来获取元素。该方法返回的是匹配该选择器的第一个元素。如果返回的结果不为null，则表示页面中存在该元素。 另外，可以使用document对象的getElementsByClassName()方法来根据元素的class属性值来获取该元素。该方法返回的是一个HTMLCollection对象，是一个类似数组的对象，可以通过遍历该对象来判断页面中是否存在该元素。 还可以使用document对象的getElementsByTagName()方法来根据元素的标签名来获取该元素。该方法返回的也是一个HTMLCollection对象，可以通过遍历来判断页面中是否存在该元素。 以上是几种常见的判断页面HTML中是否存在元素的方法，可以根据具体的需求选择合适的方法来使用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值