HTML and CSS Reference
In-Depth Information
What if you wanted to just add more text after what is already there? To do this, you could simply use the
+=
operat-
or instead of
=
. Here's an example:
document.getElementById(“firstParagraph").innerHTML += “ This text
was added to the end of the current text.";
Manipulating Attributes and Properties
To inspect all the properties that an element has, you can use the
dir()
function in the developer tools console.
This will show you a list of all the element's properties as well as its child elements.
Take a look at the properties of the
email
input by selecting it using
getElementById
.
dir(document.getElementById(“email"));
This should display a really long list of properties. You can ignore most of them at this stage, but the key properties
are those that link to the element attributes, such as
id
,
class
,
placeholder
, and
value
.
Let's update the value of this field. To do this, select the
<input>
element, specify the property you would like to
change, and then assign it a value. Oh, by the way: Did I mention that you can create variables in the console? Let's
also create a variable to store the
email
field so that you don't have to type the selection code every time.
var emailField = document.getElementById(“email");
emailField.value = “test@example.com";
You should now see that the value of the
email
field has been updated to the e-mail address you specified.
Throughout the remainder of this topic, you will write a lot of JavaScript code that interacts with page elements, up-
dating content and properties based on user input and events.
JavaScript Libraries
JavaScript libraries are collections of code that you can use to make writing JavaScript programs easier by enabling
you to write less code. Some of these libraries address cross-browser compatibility issues, and some give you easy
ways to create interactive widgets for your pages. Some even do both.
To use a JavaScript library, all you need to do is to include the library script in your HTML file using a
<script>
element. Make sure that you include this script before your JavaScript files, because the browser will load scripts in
the order in which it discovers them. You need the library to be seen first so that you can use the functions that it
provides.
In this section, you learn some of the basics about the popular JavaScript library called jQuery. You look at some of
the ways the jQuery simplifies writing JavaScript programs and how it can differ from writing programs in pure
JavaScript.
