將input框中輸入內容顯示在相應的div中【三種方法可選】
例題一枚：在input框中輸入內容，會相應的顯示在下面的div中的不同做法：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" rel="external nofollow" />
<style type="text/css">
#div{
width: 175px;
height: 100px;
margin: 20px 84px;
border:2px solid green;
}
</style>
</head>
<body>
<div class="container">
請輸入內容：<input type="text" id="put" />
<div id="div" ></div>
</div>
</body>
<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.js"></script>
js：原生DOM操作
<script type="text/javascript">
var put1=document.getElementById("put");
var div1=document.getElementById("div");
put1.onkeyup=function(){
div1.innerText=put1.value;
}
</script>
指點迷津：
getElementById獲取DOM節(jié)點，innerHTML:設置或者獲取節(jié)點內部的所有HTML代碼；
這里需要注意獲取到input里面的節(jié)點內容需要獲取value值。
這里使用的是innerHTML屬性和value屬性，注意與JQ中的方法區(qū)分
JQ操作：
<script src="js/angular.js"></script>
<script type="text/javascript">
$("#put").keyup(function(){
$("#div").html($("#put").val())
});
</script>
指點迷津：
jQuery("選擇器").action ();通過選擇器調用事件函數(shù)，但JQuery中，JQuery可以用$代替，即$("選擇器").action();
>>選擇器可以直接使用CSS選擇器，選中元素;
>>.action表示對元素執(zhí)行的操作;這里使用keyup（）事件操作，與JS的不同之處在于html（），val()這里均是方法，在JS中則是屬性
AngularJs操作：
<body ng-app="">
<div class="container">
請輸入內容：<input type="text" ng-model="name"/>
<div ng-bind="name"></div>
<!--<div id="div" >{{name}}</div>-->
</div>
</body>
指點迷津：
1.ng-app：ng-app=""聲明Angular所管轄的范圍，一般寫在body和HTML上，原則上一個頁面只能有一個
<body ng-app=""></body>
2.ng-model ：把元素值（指令把輸入域的值）綁定到應用程序變量 name。
<input type="text" ng-model="name"/>
3.ng-bind： 指令把應用程序變量 name 綁定到某個段落的 innerHTML?？捎帽磉_式替代
<div ng-bind=“name”></div>
<div>{{name}}</div>彈網(wǎng)頁加載的瞬間會看到{}，可以用ng-bind替代
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
相關文章
javascript實現(xiàn)html頁面之間參數(shù)傳遞的四種方法實例分析
這篇文章主要介紹了javascript實現(xiàn)html頁面之間參數(shù)傳遞的四種方法,結合實例形式較為詳細的分析了JavaScript實現(xiàn)頁面之間參數(shù)傳遞的常用技巧,需要的朋友可以參考下2015-12-12
這篇文章主要為大家介紹了如何使用splitChunks精細控制代碼分割來實現(xiàn)降低包大小的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了通過實例了解JS 連續(xù)賦值,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
最近的項目需要將日期轉換成中文的格式，于是寫了個小小的JS函數(shù)，使用時直接調用即可.2009-07-07
JS實現(xiàn)很實用的對聯(lián)廣告代碼（可自適應高度）
這篇文章主要介紹了JS實現(xiàn)很實用的對聯(lián)廣告代碼,可實現(xiàn)固定相對位置懸浮展示及跟隨屏幕上下滑動等功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
本篇文章是小編日常收集整理些javascript保留關鍵字相關知識匯總，需要的朋友參考下2015-12-12
這篇文章主要為大家詳細介紹了原生js滑動輪播封裝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
這篇文章主要介紹了JS+CSS實現(xiàn)感應鼠標漸變顯示DIV層的方法,涉及javascript對div層的逐漸顯示與隱藏的實現(xiàn)技巧,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了JavaScript中的Promise使用詳解,promise對象是JS進階學習中的重要知識點,需要的朋友可以參考下2021-10-10
用JavaScript實現(xiàn) 鐵甲無敵獎門人 “開口中”猜數(shù)游戲
JavaScript在常人看來都是門出不了廳堂的小語言，僅管它沒有明星語言的閃耀，但至少網(wǎng)頁的閃耀還是需要它的，同時它是一門很實用的語言。2009-10-10