php点击后增加html元素,如何动态生成html元素以及为元素追加属性的方法介绍(附代码)...

本篇文章给大家分享的是关于如何动态生成html元素以及为元素追加属性的方法介绍(附代码),内容很不错,有需要的朋友可以参考一下,希望可以帮助到大家。

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

第一种:document.createElement()创建元素,再用appendChild( )方法将元素添加到指定节点《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》

第二种:使用innerHTML直接将元素添加到指定节点《script》

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

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

main.innerHTML = "登录";

《script》

第三种: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()方法颠倒

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/334858.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

excel npoi 连接_Net操作Excel_NPOI(示例代码)

Npoi 简介1.整个Excel表格叫做工作表:WorkBook(工作薄),包含的叫页(工作表):Sheet;行:Row;单元格Cell。4.忘了告诉大家npoi是做什么的了,npoi 能够读写几乎所有的Office 97-2003文件格式&#x…

apache camel_Apache Camel中的短重试与长重试

apache camel《骆驼设计模式》一书介绍了20种模式以及用于设计基于Apache Camel的集成解决方案的众多技巧和最佳实践。 每种模式都基于真实的用例,并提供了Camel特定的实现细节和最佳实践。 为了让您有这本书的感觉,以下是该书的重试模式摘录&#xff0c…

Linux 命令之 netstat -- 查看网络状态信息/显示网络状态

文章目录命令介绍常用选项参考示例(一)列出所有端口(二)列出所有 TCP 端口(三)列出所有 UDP 端口(四)只显示监听端口(五)只列出所有监听 tcp 端口&#xff08…

pyqt5 窗口设置圆角_Qt 的一些心得(背景设置,圆角,半透明)

一. 背景刷成黑色,前景色设为白色。 方法一、paltette方式,经测试,该方法不会影响到其他控件,推荐使用 QPalette bgpal palette();bgpal.setColor (QPalette::Background, QColor (0, 0 , 0, 255));//bgpal.setColor (QPalette::Background, Qt::transp…

java语言发展历史_Java编程语言的历史和未来

java语言发展历史通过AppDynamics解决应用程序问题的速度提高了10倍–以最小的开销在代码级深度监视生产应用程序。 开始免费试用! 作为互联网上著名的编程语言 ,Java对人们如何浏览数字世界产生了深远的影响。 Java功能设置了用户对他们访问互联网的设…

Linux 命令之 Bang(!) 命令

命令说明!!执行上一条命令^foo^ bar把上一条命令里的foo替换为bar,并执行!wget重复执行最近的以wget开头的命令!wget:p仅打印最近的以wget开头的命令,不执行!n执行历史命令列表第n条命令,例如执行第三条命令:!3!-n执行历史命令列表…

matlab resample上采样,resample matlab实现

使用线性插值实现sample rate转换。function output simpleResample(input, inputfs, outputfs)inputLen length(input(:, 1));outputLen floor(inputLen * outputfs / inputfs);output zeros(outputLen, 1);timeStep inputfs / outputfs;curTime 1;integer 0;frac 0;f…

c matlab 精度,svm去优化参数C和g,输出正确率accuracy老是0

下面这个是测试的M文件%% Matlab神经网络43个案例分析%% 清空环境变量function chapter_GridSearchclose all;clear;clc;format compact;%% 数据提取% 载入测试数据wine,其中包含的数据为classnumber 3,wine:178*13的矩阵,wine_labes:178*1的列向量load wine.mat;% 画出测试数…

微服务pact测试框架_消费者驱动的Pact和Spring Boot测试

微服务pact测试框架最近,我的一位同事偶然发现了Pact.io ,我们目前的应用程序已扩展到 50多种服务,并且我们开始出现一些集成测试失败和脆弱的开发/验收测试环境。 因此,我们决定研究尝试与此相关的方法。 我从阅读开始&#xff…

用access建立一个试题库_Access考试题库(含答案).doc

所有单选题1、用Access创建的数据库文件,其扩展名是______。A:.adpB:.dbfC:.frmD:.mdb答案:D2、数据库系统的核心是______。A:数据模型B:数据库管理系统C:数据库D&#x…

Linux 命令之 arch --显示主机的硬件结构类型

文章目录介绍命令示例介绍 arch命令主要用于显示当前主机的硬件结构类型,arch命令输出的结果有:i386、i486、mips、alpha等。 此命令的适用范围:RedHat、RHEL、Ubuntu、CentOS、SUSE、openSUSE、Fedora。 命令示例 显示当前主机硬件架构类…

mega5安装包_[MEGA DEAL] 2017年完全Java捆绑包(95%折扣)

mega5安装包深入了解编程奥德赛(58小时!),进入最常用的编程语言 嘿,怪胎, 本周,在我们的JCG Deals商店中 ,我们提供了一个极端的报价 。 我们提供的2017 Complete Java Bundle 仅…

det曲线_平面曲线的曲率的复数表示

开学已经是第二周了,我的《微分几何》也上课两周了,进度比较慢,现在才讲到平面曲线的曲率。在平面曲线$\boldsymbol{t}(t)(x(t),y(t))$某点上可以找出单位切向量。$$\boldsymbol{t}\left(\frac{dx}{ds},\frac{dy}{ds}\right)$$其中$ds^2 dx^2…

matlab计算微分ppt,matlab-ch013(数值计算-微积分)20090923.ppt

matlab-ch013(数值计算-微积分)20090923.ppt 第13讲 数值计算 —微积分,张建瓴,13.1 数值积分,在工程教学和应用中,除了进行数据逼近外,还要求逼近曲线下面的面积,这就是积分问题。,一、数值积分方法,典型的数值积分方法有:用常数…

Linux 关于查看 cpu 的命令

文章目录查看物理 cpu 个数查看每个物理 cpu 中core的个数(即核数)查看逻辑 cpu 的个数查看 cpu 信息(型号)查看 cpu 的配置信息查看cpu波动情况的,尤其是多核机器上参考文档备注/说明查看物理 cpu 个数 [roothtlwk0001host ~]# cat /proc/c…

JDK 9中不推荐使用Java的Observer和Observable

在博客文章《 应用JDK 9 Deprecated增强功能》中 ,我讨论了JDK 9中 Deprecated批注中对forRemoval()和since()可选元素(方法)的添加 。 我在那篇文章中说:“在Java SE API上应用新的…

php快速开发框架津县,BetePHP:一个轻量级快速开发框架

BetePHP关于BetePHP是一个轻量级快速开发框架。框架提供了一致的API接口,使得使用接口尽可能流畅;由于框架本身不依赖其他库,这使得框架本身运行速度非常快;框架希望使用最简单的方式make thing done,减少开发者的开发…

Linux 命令之 vmstat 命令-显示虚拟内存状态

介绍 vmstat 命令的含义为显示虚拟内存状态(“Virtual Memory Statistics”),但是它可以报告关于进程、内存、I/O等系统整体运行状态。 常用选项 选项说明-a显示活跃和非活跃内存-f显示从系统启动至今的fork数量-m显示 slabinfo-n只在开始…

python编译后的文件_python 编译源文件

背景近期项目到了部署的阶段。由于项目后台和算法都是用Python "撸的",但是又不希望将源代码直接 "release" 到 “客户”哪里。于是开始思考。。。首先,按照惯性思维,能否将编译后的东东放出去呢?(类似java或…

java创建和销毁一个对象_有效的Java –创建和销毁对象

java创建和销毁一个对象创建和销毁对象(第2章) 这是Joshua Blochs的《 有效的Java》第2章的简短摘要。我仅包括与自己相关的项目。 静态工厂(项目1) 静态工厂与构造函数的一些优点: 工厂方法的名称为构造函数添加了描…