JS简单实现动态添加HTML标记的方法示例
更新时间：2018年04月08日 11:39:17 作者：chengqiuming
这篇文章主要介绍了JS简单实现动态添加HTML标记的方法,结合实例形式分析了JavaScript使用createElement()方法针对页面元素进行动态操作相关实现技巧,需要的朋友可以参考下
本文实例讲述了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>www.jb51.net 动态添加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>
四 运行结果
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
XP折叠菜单&仿QQ2006菜单...2006-12-12
JS分成三个大的部分：ECMAScript、DOM API、BOM API，其中：ECMAScript是让前端开发建立基本的编程思维。但是要想真正来写一个更加复杂的有交互式的页面,还需要WebAPI的支持，相当于把后端编程实现成前端交互。DOM+BOM就组成了WebAPI2022-06-06
MD5信息摘要算法是一种被广泛使用的密码散列函数，可以产生出一个128位（16字节）的散列值（hash value），用于确保信息传输完整一致。本文将用JavaScript实现简单MD5加密，感兴趣的可以了解一下2022-10-10
这篇文章主要介绍了js 将多个对象合并成一个对象 assign方法的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-09-09
这篇文章主要介绍了微信小程序中不同页面传递参数的操作方法,在开发项目中,避免不了不同页面之间传递数据等,那么就需要进行不同页面之间的一个数据传递的,需要的朋友可以参考下2023-12-12
layui 图片上传+表单提交+ Spring MVC的实例
今天小编就为大家分享一篇layui 图片上传+表单提交+ Spring MVC的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
用 XMLDOM 和 ADODB.Stream 实现base64编码解码实现代码，需要的朋友可以参考下。2010-11-11
偶然发现盛大通行证上的身份证验证代码，特扒下来，方便大家的使用。2011-01-01
这篇文章主要为大家详细介绍了JS原生手写轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
单击复制文字的js找了很久，由于之前没有接触过，完全不知道兼容ie及标准dom浏览器，不仅仅要通过js，而且需要flash的帮忙，下面与大家分享下具体的实现方法2013-07-07
最新评论