1) Basic HTML Code
<html>
<head>
<meta charset="utf-8">
<title>HTML Starter</title>
</head>
<body bgcolor="skyblue">
<b>Name:<input type="text"/>
Hello world!</b>
</body>
</html>
Output Screen Shot
2.) Updating a span when Input text changes using the DOM API.
<html>
<head>
<meta charset="utf-8">
<title>DIY One-way Data Binding</title>
</head>
<body bgcolor="skyblue">
<b> Name:<input id="textInput" type="text"/>
<b>Hello <span id="nameDiv"></span>!
<script>
var textInputElement = document.getElementById('textInput'),
nameDivElement = document.getElementById('nameDiv');
textInputElement.addEventListener('keyup', function(){
var text = textInputElement.value;
nameDivElement.innerHTML = text;
});
</script>
</body>
</html>
Output Screen Shot
3) Updating a span when Input text changes using Jquery
<html>
<head>
<meta charset="utf-8">
<title>DIY One-way Data Binding with jQuery</title>
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
</head>
<body bgcolor="skyblue">
<b> Name:<input id="textInput" type="text"/>
Hello <span id="nameDiv"></span>!</b>
<script>
$('#textInput').on('keyup', function(){
$('#nameDiv').html($('#textInput').val());
});
</script>
</body>
</html>
Output Screen Shot
4) Updating a span when Input text changes using Backbone
<html>
<head>
<meta charset="utf-8">
<title>DIY One-way Data Binding with Backbone</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://jashkenas.github.io/underscore/underscore-min.js"></script>
<script src="http://jashkenas.github.io/backbone/backbone-min.js"></script>
</head>
<body bgcolor="skyblue">
<b>Name:<input id="textInput" type="text"/>
<b>Hello: <span id="nameSpan"></span>!
<script>
// Model
var model = new Backbone.Model({
name: ''
});
// View
model.on('change:name', function(){
$('#nameSpan').html(model.get('name'));
});
// Controller
$('#textInput').on('keyup', function(){
model.set('name', $('#textInput').val());
});
</script>
</body>
</html>
Output Screen Shot
5) Updating a span when Input text changes using AngularJs
<html ng-app>
<head>
<meta charset="utf-8">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
<head>
<body bgcolor="skyblue">
<b>Name:<input ng-model="name" type="text"/>
<b>Hello {{name}}
</body>
<html>
Output Screen Shot
6) Data Binding with many Text Inputs.
<html ng-app>
<head>
<meta charset="utf-8">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
</head>
<body bgcolor="skyblue">
<b>Name:<input ng-model="name" type="text"/>
<br>
<b>Name:<input ng-model="name" type="text"/>
<br>
<b>Name:<input ng-model="name" type="text"/>
<br>
<b>Hello {{name}}
</body>
</html>
Output Screen Shot
7) First and Last name
<html ng-app>
<head>
<meta charset="utf-8">
<title>Angular.js Example</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
</head>
<body bgcolor="skyblue">
<b>First name:<input ng-model="firstName" type="text"/>
<br>
<b> Last name:<input ng-model="lastName" type="text"/>
<br>
<b> Hello </b> {{firstName}} {{lastName}}
</body>
</html>
Output Screen Shot
<html>
<head>
<meta charset="utf-8">
<title>HTML Starter</title>
</head>
<body bgcolor="skyblue">
<b>Name:<input type="text"/>
Hello world!</b>
</body>
</html>
Output Screen Shot
2.) Updating a span when Input text changes using the DOM API.
<html>
<head>
<meta charset="utf-8">
<title>DIY One-way Data Binding</title>
</head>
<body bgcolor="skyblue">
<b> Name:<input id="textInput" type="text"/>
<b>Hello <span id="nameDiv"></span>!
<script>
var textInputElement = document.getElementById('textInput'),
nameDivElement = document.getElementById('nameDiv');
textInputElement.addEventListener('keyup', function(){
var text = textInputElement.value;
nameDivElement.innerHTML = text;
});
</script>
</body>
</html>
Output Screen Shot
3) Updating a span when Input text changes using Jquery
<html>
<head>
<meta charset="utf-8">
<title>DIY One-way Data Binding with jQuery</title>
<script src="//code.jquery.com/jquery-2.0.3.min.js"></script>
</head>
<body bgcolor="skyblue">
<b> Name:<input id="textInput" type="text"/>
Hello <span id="nameDiv"></span>!</b>
<script>
$('#textInput').on('keyup', function(){
$('#nameDiv').html($('#textInput').val());
});
</script>
</body>
</html>
Output Screen Shot
4) Updating a span when Input text changes using Backbone
<html>
<head>
<meta charset="utf-8">
<title>DIY One-way Data Binding with Backbone</title>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://jashkenas.github.io/underscore/underscore-min.js"></script>
<script src="http://jashkenas.github.io/backbone/backbone-min.js"></script>
</head>
<body bgcolor="skyblue">
<b>Name:<input id="textInput" type="text"/>
<b>Hello: <span id="nameSpan"></span>!
<script>
// Model
var model = new Backbone.Model({
name: ''
});
// View
model.on('change:name', function(){
$('#nameSpan').html(model.get('name'));
});
// Controller
$('#textInput').on('keyup', function(){
model.set('name', $('#textInput').val());
});
</script>
</body>
</html>
Output Screen Shot
<html ng-app>
<head>
<meta charset="utf-8">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
<head>
<body bgcolor="skyblue">
<b>Name:<input ng-model="name" type="text"/>
<b>Hello {{name}}
</body>
<html>
Output Screen Shot
6) Data Binding with many Text Inputs.
<html ng-app>
<head>
<meta charset="utf-8">
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
</head>
<body bgcolor="skyblue">
<b>Name:<input ng-model="name" type="text"/>
<br>
<b>Name:<input ng-model="name" type="text"/>
<br>
<b>Name:<input ng-model="name" type="text"/>
<br>
<b>Hello {{name}}
</body>
</html>
Output Screen Shot
7) First and Last name
<html ng-app>
<head>
<meta charset="utf-8">
<title>Angular.js Example</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
</head>
<body bgcolor="skyblue">
<b>First name:<input ng-model="firstName" type="text"/>
<br>
<b> Last name:<input ng-model="lastName" type="text"/>
<br>
<b> Hello </b> {{firstName}} {{lastName}}
</body>
</html>
Output Screen Shot
