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 折半查找字符在数组中的位置(有序列表)
Dec 09 Javascript
jquery中动态效果小结
Dec 16 Javascript
JavaScript 盒模型 尺寸深入理解
Dec 31 Javascript
Javasipt:操作radio标签详解
Dec 30 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 Javascript
JS &amp; JQuery 动态添加 select option
Jun 08 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
通过实例讲解JS如何防抖动
Jun 15 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 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
php 404错误页面实现代码
2009/06/22 PHP
PHP 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
选择器中含有空格在使用示例及注意事项
2013/07/31 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
jQuery中innerHeight()方法用法实例
2015/01/19 Javascript
AngularJS中的模块详解
2015/01/29 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
原生JS实现图片轮播效果
2016/12/26 Javascript
你不知道的 javascript【推荐】
2017/01/08 Javascript
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
基于JavaScript伪随机正态分布代码实例
2019/11/07 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
2020/05/21 Javascript
[04:31]2016国际邀请赛中国区预选赛妖精采访
2016/06/27 DOTA
python中dir函数用法分析
2015/04/17 Python
Python实现控制台输入密码的方法
2015/05/29 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
Django 开发环境配置过程详解
2019/07/18 Python
将数据集制作成VOC数据集格式的实例
2020/02/17 Python
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
铭宣海淘转运:美国、日本、英国转运等全球转运公司
2019/09/10 全球购物
销售代表求职自荐信
2013/10/01 职场文书
自立自强的名人事例
2014/02/10 职场文书
施工协议书范本
2014/04/22 职场文书
2014年教师业务学习材料
2014/05/12 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
初中毕业感言300字
2015/07/31 职场文书
利用Python实时获取steam特惠游戏数据
2022/06/25 Python