JS简单实现动态添加HTML标记的方法示例


Posted in Javascript onApril 08, 2018

本文实例讲述了JS简单实现动态添加HTML标记的方法。分享给大家供大家参考,具体如下:

一 介绍

动态添加一个HTML标记可以使用createElement()方法来实现。

CreateElement()方法可以根据一个指定的类型来创建一个HTML标记。

语法:

sElement=document.createElement(sName)

sElement:用来接收该方法返回的一个对象。

sName:用来设置HTML标记的类型和基本属性。

二 应用

动态添加一个文本框

本示例通过单击“动态添加文本”按钮,将在页面中动态添加一个文本框。

三 代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>3water.com 动态添加HTML标记</title>
<script language="javascript">
 <!--
 function addText()
 {
   var txt=document.createElement("input");
   txt.type="text";
   txt.name="txt";
   txt.value="动态添加的文本框";
   document.fm1.appendChild(txt);
 }
 -->
</script>
</head>
<body>
<form name="fm1">
<input type="button" name="btn1" value="动态添加文本框" onclick="addText();" />
</form>
</body>
</html>

四 运行结果

JS简单实现动态添加HTML标记的方法示例

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery 锚点跳转滚动条平滑滚动一句话代码
Apr 30 Javascript
window.name代替cookie的实现代码
Nov 28 Javascript
JQuery控制Radio选中方法分析
May 29 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
node结合swig渲染摸板的方法
Apr 11 Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
Vue结合后台导入导出Excel问题详解
Feb 19 Javascript
新手如何快速理解js异步编程
Jun 24 Javascript
React Router v4 入坑指南(小结)
Apr 08 #Javascript
Angular 5.x 学习笔记之Router(路由)应用
Apr 08 #Javascript
vue2.0 资源文件assets和static的区别详解
Apr 08 #Javascript
通过vue-router懒加载解决首次加载时资源过多导致的速度缓慢问题
Apr 08 #Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 #Javascript
JS求Number类型数组中最大元素方法
Apr 08 #Javascript
angular2模块和共享模块详解
Apr 08 #Javascript
You might like
自定义session存储机制避免会话保持问题
2014/10/08 PHP
php源码分析之DZX1.5随机数函数random用法
2015/06/17 PHP
Yii实现的多级联动下拉菜单
2016/07/13 PHP
JQuery 表格操作(交替显示、拖动表格行、选择行等)
2009/07/29 Javascript
Javascript操作cookie的函数代码
2012/10/03 Javascript
javascript级联下拉列表实例代码(自写)
2013/05/10 Javascript
JavaScript编程的10个实用小技巧
2014/04/18 Javascript
简单谈谈node.js 版本控制 nvm和 n
2015/10/15 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
2016/12/24 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
javascript 中关于array的常用方法详解
2017/05/05 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
详解JavaScript中的函数、对象
2019/04/01 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
python返回昨天日期的方法
2015/05/13 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
keras训练曲线,混淆矩阵,CNN层输出可视化实例
2020/06/15 Python
python飞机大战游戏实例讲解
2020/12/04 Python
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
英国领先的狗和宠物美容专家:Christies Direct
2017/04/03 全球购物
旧时光糖果:Old Time Candy
2018/02/05 全球购物
怎样客观的做好自我评价
2013/12/28 职场文书
奥巴马演讲稿
2014/01/08 职场文书
建议书的格式
2014/05/12 职场文书
2014年店长工作总结
2014/11/17 职场文书
餐厅收银员岗位职责
2015/04/07 职场文书
城南旧事电影观后感
2015/06/16 职场文书
运动会通讯稿50字
2015/07/20 职场文书
win10搭建配置ftp服务器的方法
2022/08/05 Servers