将input框中输⼊内容显⽰在相应的div中【三种⽅法可
选】
例题⼀枚：在input框中输⼊内容，会相应的显⽰在下⾯的div中的不同做法：
<!DOCTYPE html>
<html>
html input type属性
<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 ElementById("put");
var ElementById("div");
div1.innerText=put1.value;
}
</script>
指点迷津：
getElementById获取DOM节点，innerHTML：设置或者获取节点内部的所有HTML代码；
这⾥需要注意获取到input⾥⾯的节点内容需要获取value值。
这⾥使⽤的是innerHTML属性和value属性，注意与JQ中的⽅法区分
JQ操作：
<script src="js/angular.js"></script>
<script type="text/javascript">
$("#put").keyup(function(){
$("#div").html($("#put").val())
});
</script>
指点迷津：
jQuery("选择器").action ()；通过选择器调⽤事件函数，但JQuery中，JQuery可以⽤$代替，即$("选择器").action();
>>选择器可以直接使⽤CSS选择器，选中元素;
>>.action表⽰对元素执⾏的操作；这⾥使⽤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>
指点迷津：
<-app：ng-app=""声明Angular所管辖的范围，⼀般写在body和HTML上，原则上⼀个页⾯只能有⼀个
<body ng-app=""></body>
<-model ：把元素值（指令把输⼊域的值）绑定到应⽤程序变量 name。
<input type="text"  ng-model="name"/>
<-bind：指令把应⽤程序变量 name 绑定到某个段落的 innerHTML。可⽤表达式替代
<div ng-bind=“name”></div>
<div>{{name}}</div>弹⽹页加载的瞬间会看到{}，可以⽤ng-bind替代
以上就是本⽂的全部内容，希望本⽂的内容对⼤家的学习或者⼯作能带来⼀定的帮助，同时也希望多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。