在对应div的输入框中显示输入[三种方法可选]

一个例子：输入框中的输入将显示以下div中的不同实践：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title link rel='样式表' type=' text/CSS ' href=' CSS/bootstrap . CSS ' rel=' external no follow '/style type=' text/CSS ' # div { width : 175 px；高度： 100像素；margin: 20px 84pxborder:2px纯绿色；}/style/head body div class=' container '请输入内容：输入类型=' text ' id=' put '/div id=' div '/div/div/body script src=' http : js/jquery-3 . 1 . 1 . js '/script script src=' http : js/bootstrap . js '/script js:原生DOM操作

脚本类型=' text/JavaScript ' var put 1=document . getelementbyid(' put ')；var div 1=document . getelementbyid(' div ')；put 1 . onkeyup=function(){ div 1 . innertext=put 1 . value；}/脚本指向迷宫：

GetElementById获取DOM节点，innerHTML:设置或获取节点内部的所有HTML代码；

在这里，我们要注意需要获取value值来获取输入中的节点内容。

这里使用了innerHTML属性和值属性，这应该与JQ的方法有所区别

JQ行动：

script src=' http : js/angular . js '/script script type=' text/JavaScript ' $(' # put ')。keyup(function(){ $('#div '))。html($('#put ')。val())})；/脚本指向迷宫：

JQuery('选择器')。action()；事件函数是通过选择器调用的，但是在JQuery中，JQuery可以用$，也就是$ ('selector ')替换。action()；

选择器可以直接使用CSS选择器选择元素；action表示对元素执行的操作；这里使用的是Keyup()事件操作，与JS的不同之处在于这里的html()和val()是方法，但是JS中的属性

AngularJs操作：

body ng-app=' div class=' container '请输入内容：输入类型=' 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:将元素值(指令输入字段的值)绑定到应用程序变量名。

输入类型='text' ng-model='name'/

3.ng-bind:指令将应用程序变量名绑定到段落的innerHTML。可以用表达式替换

div ng-bind="name"/div

加载网页时，Div{{name}}/div会看到{}，可以用ng-bind替换

以上就是本文的全部内容。希望本文的内容能给大家的学习或工作带来一些帮助，也希望多多支持我们！