HTML and CSS Reference
In-Depth Information
Once you have found the element to update, you can change its content by setting the
innerHtml
property to any string that can optionally contain HTML markup. The code below retrieves an
element named
header
and sets its content to the string “Hello,” which will be rendered as bold text.
var element = document.getElementById("header");
element.innerHtml = "<b>Hello</b>";
This pattern represents a programmatic way to update the user interface with calculated data. The
approach that is based on direct updates of the DOM is extremely fast, but works well only if you want
to update specific elements. Scenarios where you have multiple elements to display—for example, a
list—or multiple pieces of data to display on different elements are not served well by this approach.
Note
By using the
innerText
property, instead of
innerHtml
, you just set the plain text of
the HTML element without touching any markup or style. In a way, using
innerText
is safer,
since with it you don't take any risk of altering the existing graphical structure.
Declarative manipulation of the HTML page
The WinJS library also supports a declarative form of updating HTML elements, known as data
binding. Let's see how it works. Create a new blank Windows 8 project and edit the
BODY
of the
default.html
page to make it look like the code below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DataBinding</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- DataBinding references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<header>
<h2>Start Here! Build <b>Windows 8</b> Applications with <b>HTML5</b> and
<b>JavaScript</b></h2>
<hr />
<p>Random number displayed via data-binding.</p>
</header>
Search WWH ::
Custom Search