A common task with jQuery programing is to change or add text to an element on the page.

You may want to get the visitor's name and place it into a welcome box. You may want to update a score if the visitor is taking a test.

 

jquery-blank.html

Create a new document: tutorial-3.html

We will start out with the basic jQuery document that was created in Tutorial 1. Open up the document called jquery-blank.html in a text editor and do a "Save As" into the same directory. Save the document as  tutorial-3.html.


Create the HTML element

Inside of the <body>...</body> tags we are going to create an element for to hold the information that we will retreive with jQuery when someone first opens up the page.

Type the following into your open document:

<body>
<h1>Welcome to our website, </h1>
</body>


Style the HTML element

Let's add some styling so that the <h1> tag is in the middle of the web page. Above the closing </head> tag, you will see the <style type="text/css">...</style> section. Type in the following:

<style type="text/css">
    h1 {text-align: center; margin-top: 30px;}
</style>


Add the jquery code

Go up to the <script>...</script> section in the <head>...</head> section. This is the section with $(document).ready() function already inserted.

What we are doing in this tutorial is using the JavaScript prompt(); command and the jQuery .append() method.

prompt( );    This will create a prompt box. The prompt box is similar to an alert box, but it has a text box for the user to insert information. When the user types in the info then hits the OK button, the prompt box returns this information. In this example the variable visitorName will hold that information.

.append( );    This will take the information held in its parentheses and append it to whatever is in the selector of "h1". If you had other <h1> tags on the page, you should assign an id to this individual <h1> or all the <h1> tags would show the information gathered from the prompt() command. Note that we dod not put quotation marks on each side of (visitorName) because it is a variable not a string.

<script type="text/javascript">
    $(document).ready(function(){
        var visitorName = prompt("Enter your name:");
        $("h1").append(visitorName);
    });
</script>


Test the code

Save the document and open up a new browser window. Type the path to the document in the address bar of the browser. For example:

file:///C:/jquery-tutorials/tutorial-3.html

When you open up the document, a dialog box should appear that requests that you type in your name. This is the jQuery prompt box. This box will look a little bit different on different browsers.

Type in a name and select the OK button. You should see something like this below:

Welcome to our website, John Smith