JS簡(jiǎn)單實(shí)現(xiàn)動(dòng)態(tài)添加HTML標(biāo)記的方法示例
本文實(shí)例講述了JS簡(jiǎn)單實(shí)現(xiàn)動(dòng)態(tài)添加HTML標(biāo)記的方法。分享給大家供大家參考，具體如下：
一 介紹
動(dòng)態(tài)添加一個(gè)HTML標(biāo)記可以使用createElement()方法來(lái)實(shí)現(xiàn)。
CreateElement()方法可以根據(jù)一個(gè)指定的類型來(lái)創(chuàng)建一個(gè)HTML標(biāo)記。
語(yǔ)法：
sElement=document.createElement(sName)
sElement：用來(lái)接收該方法返回的一個(gè)對(duì)象。
sName：用來(lái)設(shè)置HTML標(biāo)記的類型和基本屬性。
二 應(yīng)用
動(dòng)態(tài)添加一個(gè)文本框
本示例通過(guò)單擊“動(dòng)態(tài)添加文本”按鈕，將在頁(yè)面中動(dòng)態(tài)添加一個(gè)文本框。
三 代碼
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.fzitv.net 動(dòng)態(tài)添加HTML標(biāo)記</title>
<script language="javascript">
<!--
function addText()
{
var txt=document.createElement("input");
txt.type="text";
txt.name="txt";
txt.value="動(dòng)態(tài)添加的文本框";
document.fm1.appendChild(txt);
}
-->
</script>
</head>
<body>
<form name="fm1">
<input type="button" name="btn1" value="動(dòng)態(tài)添加文本框" onclick="addText();" />
</form>
</body>
</html>
四 運(yùn)行結(jié)果
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript頁(yè)面元素操作技巧總結(jié)》、《JavaScript操作DOM技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
本篇文章通過(guò)js和css結(jié)合實(shí)現(xiàn)簡(jiǎn)單的吞噬效果，代碼簡(jiǎn)單易懂，需要的朋友可以參考下本文2015-09-09
下面小編就為大家?guī)?lái)一篇原生js封裝運(yùn)動(dòng)框架的示例講解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
JavaScript使用cookie記錄臨時(shí)訪客信息的方法
這篇文章主要介紹了JavaScript使用cookie記錄臨時(shí)訪客信息的方法,涉及javascript操作cookie的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
javascript和jquery中cookie的設(shè)置方法
Cookie 是瀏覽器訪問(wèn)服務(wù)器后，服務(wù)器傳給瀏覽器的一段數(shù)據(jù)。瀏覽器需要保存這段數(shù)據(jù)，不會(huì)輕易刪除（保存在計(jì)算機(jī)中）。此后每次瀏覽器訪問(wèn)該服務(wù)器，都必須帶上這段數(shù)據(jù)。這篇文章主要介紹了javascript和jquery中cookie的設(shè)置方法2023-07-07
JavaScript根據(jù)CSS的Media Queries來(lái)判斷瀏覽設(shè)備的方法
這篇文章主要介紹了JavaScript根據(jù)CSS的Media Queries來(lái)判斷瀏覽設(shè)備的方法,主要思路是通過(guò)CSS Media Queries改變一個(gè)類的某個(gè)屬性值(例如 z-index),然后用JavaScript讀取判斷,需要的朋友可以參考下2016-05-05
解決layui中table異步數(shù)據(jù)請(qǐng)求不支持自定義返回?cái)?shù)據(jù)格式的問(wèn)題
今天小編就為大家分享一篇解決layui中table異步數(shù)據(jù)請(qǐng)求不支持自定義返回?cái)?shù)據(jù)格式的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
js es6系列教程 - 新的類語(yǔ)法實(shí)戰(zhàn)選項(xiàng)卡(詳解)
下面小編就為大家?guī)?lái)一篇js es6系列教程 - 新的類語(yǔ)法實(shí)戰(zhàn)選項(xiàng)卡(詳解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
簡(jiǎn)單談?wù)刯avascript中的變量、作用域和內(nèi)存問(wèn)題
這篇文章主要介紹了簡(jiǎn)單談?wù)刯avascript中的變量、作用域和內(nèi)存問(wèn)題的相關(guān)資料,需要的朋友可以參考下2015-08-08
使用TypeScript實(shí)現(xiàn)一個(gè)類型安全的EventBus示例詳解
EventBus是工作中常用的工具,本文用Typescript實(shí)現(xiàn)一個(gè)具備基礎(chǔ)功能且類型安全的EventBus，是我近期學(xué)習(xí)Typescript的知識(shí)總結(jié)，對(duì)TypeScript實(shí)現(xiàn)EventBus相關(guān)知識(shí)感興趣的朋友一起看看吧2022-06-06
javascript框架設(shè)計(jì)之瀏覽器的嗅探和特征偵測(cè)
這篇文章主要介紹了javascript框架設(shè)計(jì)之瀏覽器的嗅探和特征偵測(cè)的相關(guān)資料,需要的朋友可以參考下2015-06-06