這里實(shí)現(xiàn)JavaScript將文本框的值插入當(dāng)前面指定位置，這在一些表單提交場(chǎng)合或許我們都用到過，本代碼段是將文本框的值寫入到當(dāng)前頁的body區(qū)域內(nèi)，如果你設(shè)置有其它的文本框，則可以值賦給這些文本框，可以讓使用表單的用戶免去輸入的麻煩。

運(yùn)行效果如下圖所示：

具體代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>插入節(jié)點(diǎn)</title>
<script language="javascript">
 <!--
  function crNode(str)
  {
   var newP=document.createElement("p");
   var newTxt=document.createTextNode(str);
   newP.appendChild(newTxt);
   return newP;
  }
  function insetNode(nodeId,str)
  {
   var node=document.getElementById(nodeId);
   var newNode=crNode(str);
   if(node.parentNode)//判斷是否擁有父節(jié)點(diǎn)
   node.parentNode.insertBefore(newNode,node); 
  } 
 -->
</script>
</head>
<body>
 <h2 id="h">在上面插入節(jié)點(diǎn)</h2>
 <form id="frm" name="frm">
 輸入文本：<input type="text" name="txt" />
 <input type="button" value="前插入" onclick="insetNode('h',document.frm.txt.value);" />
 </form>
</body>
</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

js實(shí)現(xiàn)簡單擲骰子小游戲
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡單搖篩子小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10
JavaScript相等判斷的避坑實(shí)戰(zhàn)指南
JavaScript中的相等性判斷,在項(xiàng)目開發(fā)中,我經(jīng)常會(huì)遇到,今天我們一起探討下,下面這篇文章主要給大家介紹了關(guān)于JavaScript相等判斷的避坑實(shí)戰(zhàn)指南,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
JavaScript實(shí)現(xiàn)元素滾動(dòng)條到達(dá)一定位置循環(huán)追加內(nèi)容
下面小編就為大家分享一篇JavaScript實(shí)現(xiàn)元素滾動(dòng)條到達(dá)一定位置循環(huán)追加內(nèi)容，具有很好的參考價(jià)值，希望對(duì)大家有所幫助
2017-12-12
JavaScript簡單獲取系統(tǒng)當(dāng)前時(shí)間完整示例
這篇文章主要介紹了JavaScript簡單獲取系統(tǒng)當(dāng)前時(shí)間的方法,涉及javascript針對(duì)日期與時(shí)間的判斷以及字符串組合的相關(guān)技巧,需要的朋友可以參考下
2016-08-08
如何利用Javascript生成平滑曲線詳解
相信大家都遇到過,在各種圖表框架中經(jīng)常會(huì)有將一段折線平滑的需求,不僅能給用戶帶來一種柔和的感覺,還能美化界面,讓折線看起來沒那么生硬,這篇文章主要給大家介紹了關(guān)于如何利用Javascript生成平滑曲線的相關(guān)資料,需要的朋友可以參考下
2021-07-07
JS設(shè)計(jì)模式之訪問者模式的用法詳解
JS訪問者模式是一種行為型設(shè)計(jì)模式,用于將算法與對(duì)象結(jié)構(gòu)分離, 該模式允許你定義新的操作（訪問者）而無需修改現(xiàn)有對(duì)象結(jié)構(gòu)（被訪問者）, 通過這種方式,你可以在不改變對(duì)象結(jié)構(gòu)的情況下添加新的操作,本文就給大家詳細(xì)的講講JS訪問者模式的用法
2023-08-08
JS實(shí)現(xiàn)延遲隱藏功能的方法(類似QQ頭像鼠標(biāo)放上展示信息)
下面小編就為大家分享一篇JS實(shí)現(xiàn)延遲隱藏功能的方法(類似QQ頭像鼠標(biāo)放上展示信息)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2017-12-12
簡單談?wù)凧S中的正則表達(dá)式
下面小編就為大家?guī)硪黄唵握務(wù)凧S中的正則表達(dá)式。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09
Bootstrap告警框（alert）實(shí)現(xiàn)彈出效果和短暫顯示后上浮消失的示例代碼
這篇文章主要介紹了Bootstrap告警框（alert）實(shí)現(xiàn)彈出效果和短暫顯示后上浮消失，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-08-08
js實(shí)現(xiàn)瀑布流的三種方式比較
瀑布流，又稱瀑布流式布局，是比較流行的一種網(wǎng)站頁面布局，這篇文章主要介紹了js實(shí)現(xiàn)瀑布流的三種方式，感興趣的小伙伴們可以參考一下
2015-12-12