JavaScript實現(xiàn)將文本框的值插入指定位置的方法

更新時間：2015年08月13日 10:53:12 作者：企鵝

這篇文章主要介紹了JavaScript實現(xiàn)將文本框的值插入指定位置的方法,涉及javascript節(jié)點添加操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了JavaScript實現(xiàn)將文本框的值插入指定位置的方法。分享給大家供大家參考。具體如下：

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

運行效果如下圖所示：

具體代碼如下：

<!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é)點</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é)點
   node.parentNode.insertBefore(newNode,node); 
  } 
 -->
</script>
</head>
<body>
 <h2 id="h">在上面插入節(jié)點</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>

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

您可能感興趣的文章:

相關(guān)文章

使用JavaScript實現(xiàn)輪播圖效果完整實例
我們在各種網(wǎng)頁中經(jīng)常見到輪播圖的效果,下面這篇文章主要給大家介紹了關(guān)于使用JavaScript實現(xiàn)輪播圖效果的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-01-01
利用ASP發(fā)送和接收XML數(shù)據(jù)的處理方法與代碼
利用ASP發(fā)送和接收XML數(shù)據(jù)的處理方法與代碼...
2007-11-11
JavaScript constructor和instanceof,JSOO中的一對歡喜冤家
現(xiàn)在流行面向?qū)ο?JavaScript當然要迎頭趕上. 有說法JavaScript就是徹頭徹尾的OO語言,但我覺得JavaScript實現(xiàn)面向?qū)ο蟮某绦蜻€是有諸多不便的.
2009-05-05
js 獲取后臺的字段改變 checkbox的被選中的狀態(tài) 代碼
js 獲取后臺的字段改變 checkbox的被選中的狀態(tài) 代碼，需要的朋友可以參考一下
2013-06-06
基于JavaScript實現(xiàn)年月日三級聯(lián)動
這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)年月日三級聯(lián)動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-06-06
JS前端框架關(guān)于重構(gòu)的失敗經(jīng)驗分享
關(guān)于重構(gòu)JS前端框架的失敗經(jīng)驗接下來與大家分享一下，感興趣的你可不要錯過了哈，畢竟是經(jīng)驗之談哈
2013-03-03
js仿淘寶放大鏡效果
這篇文章主要為大家詳細介紹了js仿淘寶放大鏡效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12
Javascript實現(xiàn)飛動廣告效果的方法
這篇文章主要介紹了Javascript實現(xiàn)飛動廣告效果的方法,可實現(xiàn)廣告窗口的浮動顯示效果,且廣告窗口具有關(guān)閉功能,需要的朋友可以參考下
2015-05-05
JS html事件冒泡和事件捕獲操作示例
這篇文章主要介紹了JS html事件冒泡和事件捕獲操作,結(jié)合完整實例形式分析了javascript事件冒泡及事件捕獲相關(guān)原理與實現(xiàn)方法,需要的朋友可以參考下
2019-05-05
js獲取瀏覽器的各種屬性
本篇文章主要介紹了js獲取瀏覽器各種屬性的相關(guān)資料。具有很好的參考價值。下面跟著小編一起來看下吧
2017-04-04