document.createElement()创建元素,再用appendChild( )添加

动态引入jquery:

var scriptElement=document.createElement("script");
scriptElement.type="text/javascript";
scriptElement.src="https://code.jquery.com/jquery-3.4.1.min.js";
scriptElement.charset="utf-8";
document.getElementsByTagName('head')[0].appendChild(scriptElement);

如果属性有特殊字符怎么办(比如属性名为http-equiv)?使用setAttribute方法添加属性。动态添加meta元素,指定5秒后刷新:

var meta=document.createElement("meta");
meta.setAttribute("http-equiv","refresh");
meta.setAttribute("content","5");
document.getElementsByTagName('head')[0].appendChild(meta);

使用innerHTML

使用innerHTML就随意的多了,将要添加的html拼成字符串即可。替换html > body中的内容:

var bodyElement = document.getElementsByTagName("body");
bodyElement[0].innerHTML = "<H1>Hello World!</H1>";

jQuery

jQuery封装了很对好用的方法,动态添加更随意。替换html > body中的内容:

var newElement= $("<H1>Hello World!</H1>");
$("body:first").append(newElement);

动态添加html元素相关推荐

  1. jQuery给动态添加的元素绑定事件的方法

    jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这 ...

  2. jquery append 动态添加的元素事件on 不起作用的解决方案

    用jquery添加新元素很容易,面对jquery append 动态添加的元素事件on 不起作用我们该如何解决呢?on方法中要先找到原选择器(如例.info),再找到动态添加的选择器(如列.delet ...

  3. 动态添加html元素绑定事件,关于javascript:jQuery如何将onclick事件绑定到动态添加的HTML元素...

    本问题已经有最佳答案,请猛点这里访问. 我想将onclick事件绑定到用jquery动态插入的元素 但它从不运行绑定函数.如果您能指出这个示例为什么不起作用,以及如何使它正常运行,我将非常高兴: /p ...

  4. jQuery 为动态添加的元素绑定事件

    在使用jquery的方式为元素绑定事件时,我经常使用bind或者click,但这只能为页面已经加载好的元素绑定事件.像需要用ajax的方式请求远程数据来动态添加页面元素时,显然以上几种绑定事件的方式是 ...

  5. 比较好玩的动态添加网页元素

    比较好玩的动态添加网页元素 javascript 有一些很有趣的功能.下面介绍三样小功能. 1.动态创建按键 2动态创建链接 3动态创建表格 效果如下: 源代码如下: <!DOCTYPE htm ...

  6. Bootstrap3动态添加的元素tooltip不生效

    文章目录 现象 抄代码看这里 现象 使用tooltip的时候,发现动态添加的元素,鼠标移上去不会出现tooltip. 然后官方文档找到GitHub上一个issue解决了 抄代码看这里 // 动态添加的 ...

  7. 原生js 给动态添加的元素添加(事件监听器)

    原生js (事件监听)和(动态添加元素) 给动态添加的元素添加点击事件 <!DOCTYPE html> <html><head><meta charset=& ...

  8. JavaScript实现动态添加的元素添加点击事件

    在页面开发过程中常常遇到需要动态添加元素,然后给这一元素绑定相关事件的情况,这种情况下一般需要给元素加上相关属性,然后写这些元素的事件函数即可.动态添加的元素怎么绑定事件呢? 原生JavaScript ...

  9. html页面forEach用法,jQuery教程之使用模板动态添加html元素,相当于jstl里的foreach...

    本篇文章探讨了jQuery教程之使用模板动态添加html元素,相当于jstl里的foreach,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. < 1.开发的时候有时候要循 ...

最新文章

  1. 用逻辑回归模型解决互联网金融信用风险问题
  2. 关于收到部分还款SAP系统两种处理方法的说明和比较
  3. 错误:未在本地计算机上注册“Microsoft.Ace.OleDb.12.0”提供程序
  4. mysql+误操作怎么恢复_Mysql误操作恢复流程
  5. 北京加密机现场select问题
  6. mysql 执行查询_MySQL查询的执行过程
  7. mysql的未提示输入密码
  8. RocketMQ 消息队列单机部署及使用
  9. 拓端tecdat|R语言基于协方差的结构方程拟合的卡方检验
  10. spring5.0学习笔记1
  11. Shell子程序结构,函数
  12. 前端-图片压缩,基于vue/webpack的tinypng插件
  13. dz中footer.php在哪找,去掉DZ顶部标题,美化底部左下方版权,详细教程
  14. 知识图谱系列(一):如何构建一个简单的知识图谱
  15. AI产品经理视角下的AI翻译机 in 旅游场景
  16. 移动磁盘数据错误循环冗余检查,要怎样恢复数据
  17. 2018上海科技大学991数据结构与算法
  18. 微信开发之小程序实现倒计时
  19. java轮盘赌_轮盘赌算法
  20. dbus 嵌入式linux,MeeGo操作系统DBus调试工具

热门文章

  1. Java - 初识Java
  2. 流水号结合自定义函数实现申请业务
  3. 100万“愤怒的小鸟”:中国手机开发者生存调查
  4. MVC3+Entity Framework 实现投票系统(一)
  5. c# 在DataTable的第一列(指定列)的前面添加一列
  6. ORA-28000: the account is locked-的解决办法
  7. 对RESTful Web API的理解与设计思路
  8. Centos 安装python 3.7 遇到 ModuleNotFoundError: No module named _ctypesmake [install] Error 1(亲测下面的红字内容)
  9. golang学习之旅:使用go语言操作mysql数据库(自己测试了)
  10. Nginx SSI 设置