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 相关文章推荐
javascript转换字符串为dom对象(字符串动态创建dom)
May 10 Javascript
JS链式调用的实现方法
Mar 07 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 Javascript
原生js获取元素样式的简单方法
Aug 06 Javascript
利用JS实现简单的瀑布流加载图片效果
Apr 22 Javascript
说说AngularJS中的$parse和$eval的用法
Sep 14 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 Javascript
JS匿名函数内部this指向问题详析
May 10 Javascript
JS实现图片幻灯片效果代码实例
May 21 Javascript
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
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
用PHP发电子邮件
2006/10/09 PHP
php上传文件,创建递归目录的实例代码
2013/10/18 PHP
PHP getDocNamespaces()函数讲解
2019/02/03 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
asp.net HttpHandler实现图片防盗链
2009/11/09 Javascript
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
60行js代码实现俄罗斯方块
2015/03/31 Javascript
JavaScript实现仿网易通行证表单验证
2015/05/25 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
python获取当前计算机cpu数量的方法
2015/04/18 Python
浅谈python字符串方法的简单使用
2016/07/18 Python
解决python2.7 查询mysql时出现中文乱码
2016/10/09 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
python如何对实例属性进行类型检查
2018/03/20 Python
在Pycharm中执行scrapy命令的方法
2019/01/16 Python
python多线程抽象编程模型详解
2019/03/20 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
python3.8与pyinstaller冲突问题的快速解决方法
2020/01/16 Python
Python list运算操作代码实例解析
2020/01/20 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
从当地商店送来的杂货:Instacart
2018/08/19 全球购物
加热夹克:RAVEAN
2018/10/19 全球购物
沃达丰英国有限公司:Vodafone英国
2019/04/16 全球购物
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
物业客服专员岗位职责
2013/11/30 职场文书
个人近期表现材料
2014/02/11 职场文书
幼儿教师研修感言
2014/02/12 职场文书
普通党员对照检查材料
2014/08/28 职场文书
小学生清明节演讲稿
2014/09/05 职场文书
python中 Flask Web 表单的使用方法
2022/05/20 Python