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程序设计有所帮助。
相关文章
本篇文章通过js和css结合实现简单的吞噬效果，代码简单易懂，需要的朋友可以参考下本文2015-09-09
下面小编就为大家带来一篇原生js封装运动框架的示例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了JavaScript使用cookie记录临时访客信息的方法,涉及javascript操作cookie的技巧,非常具有实用价值,需要的朋友可以参考下2015-04-04
Cookie 是浏览器访问服务器后，服务器传给浏览器的一段数据。浏览器需要保存这段数据，不会轻易删除（保存在计算机中）。此后每次浏览器访问该服务器，都必须带上这段数据。这篇文章主要介绍了javascript和jquery中cookie的设置方法2023-07-07
JavaScript根据CSS的Media Queries来判断浏览设备的方法
这篇文章主要介绍了JavaScript根据CSS的Media Queries来判断浏览设备的方法,主要思路是通过CSS Media Queries改变一个类的某个属性值(例如 z-index),然后用JavaScript读取判断,需要的朋友可以参考下2016-05-05
解决layui中table异步数据请求不支持自定义返回数据格式的问题
今天小编就为大家分享一篇解决layui中table异步数据请求不支持自定义返回数据格式的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
下面小编就为大家带来一篇js es6系列教程 - 新的类语法实战选项卡(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了简单谈谈javascript中的变量、作用域和内存问题的相关资料,需要的朋友可以参考下2015-08-08
使用TypeScript实现一个类型安全的EventBus示例详解
EventBus是工作中常用的工具,本文用Typescript实现一个具备基础功能且类型安全的EventBus，是我近期学习Typescript的知识总结，对TypeScript实现EventBus相关知识感兴趣的朋友一起看看吧2022-06-06
这篇文章主要介绍了javascript框架设计之浏览器的嗅探和特征侦测的相关资料,需要的朋友可以参考下2015-06-06
最新评论