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设置和获取HTML、文本和值示例
Jul 08 Javascript
JavaScript及jquey实现多个数组的合并操作
Sep 06 Javascript
javascript解决IE6下hover问题的方法
Jul 28 Javascript
详解vue-cli官方脚手架配置
Jul 20 Javascript
vue绑定事件后获取绑定事件中的this方法
Sep 15 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
Node.js中package.json中库的版本号(~和^)
Apr 02 Javascript
js前端面试之同步与异步问题详解
Apr 03 Javascript
小程序两种滚动公告栏的实现方法
Sep 17 Javascript
uni-app 支持多端第三方地图定位的方法
Jan 03 Javascript
vue使用原生swiper代码实例
Feb 05 Javascript
antd配置config-overrides.js文件的操作
Oct 31 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设计聊天室步步通
2006/10/09 PHP
PHP Session机制简介及用法
2014/08/19 PHP
Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
2019/02/13 PHP
一些常用的JS功能函数代码
2009/06/23 Javascript
jquery 页面全选框实践代码
2010/04/02 Javascript
理解Javascript_07_理解instanceof实现原理
2010/10/15 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
js window.print实现打印特定控件或内容
2013/09/16 Javascript
JQuery中serialize() 序列化
2015/03/13 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
2016/03/05 Javascript
window.onload绑定多个事件的两种解决方案
2016/05/15 Javascript
JavaScript模仿Pinterest实现图片预加载功能
2016/10/25 Javascript
微信小程序 setData的使用方法详解
2017/04/20 Javascript
Angular.Js中ng-include指令的使用与实现
2017/05/07 Javascript
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
jquery中done和then的区别(详解)
2017/12/19 jQuery
微信小程序实现流程进度的图样式功能
2018/01/16 Javascript
Vue.js进阶知识点总结
2018/04/01 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
解决Angular4项目部署到服务器上刷新404的问题
2018/08/31 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
关于Python中浮点数精度处理的技巧总结
2017/08/10 Python
Python 处理文件的几种方式
2019/08/23 Python
Python流程控制 while循环实现解析
2019/09/02 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
市场营销大学生职业规划书
2014/02/25 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
高考诚信考试承诺书
2015/04/29 职场文书
Python图像处理之图像拼接
2021/04/28 Python
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL
利用Python多线程实现图片下载器
2022/03/25 Python
mysql sock文件存储了什么信息
2022/07/15 MySQL