diff --git a/javascript/exercises/dom.html b/javascript/exercises/dom.html
index f65fe614..ce3f44e9 100644
--- a/javascript/exercises/dom.html
+++ b/javascript/exercises/dom.html
@@ -31,7 +31,7 @@
img.width = 400;
img.src = 'http://www.logostage.com/logos/yahoo.GIF';
var button = document.getElementById('gbqfba');
-button.innerHTML = 'Yahoooo!';
+button.textContent = 'Yahoooo!';
@@ -49,11 +49,14 @@
<body>
<h1>About Me</h1>
- <ul>
- <li>Nickname: <span id="nickname"></span>
- <li>Favorites: <span id="favorites"></span>
- <li>Hometown: <span id="hometown"></span>
- </ul>
+ <dl>
+ <dt>Nickname:</dt>
+ <dd id="nickname"></dd>
+ <dt>Favorites:</dt>
+ <dd id="favorites"></dd>
+ <dt>Hometown:</dt>
+ <dd id="hometown"></dd>
+ </dl>
</body>
</html>
@@ -61,7 +64,7 @@
Add a script tag to the bottom.
Change the body style so it has a font-family of "Arial, sans-serif".
Replace each of the spans (nickname, favorites, hometown) with your own information.
- Iterate through each li and change the class to "listitem". Add a style
+ Iterate through each dt and change the class to "listitem". Add a style
tag that sets a rule for "listitem" to make the color red.
Create a new img element and set its src attribute to
a picture of you. Append that element to the page.
@@ -83,18 +86,21 @@
<body>
<h1>About Me</h1>
- <ul>
- <li>Nickname: <span id="nickname"></span>
- <li>Favorites: <span id="favorites"></span>
- <li>Hometown: <span id="hometown"></span>
- </ul>
+ <dl>
+ <dt>Nickname:</dt>
+ <dd id="nickname"></dd>
+ <dt>Favorites:</dt>
+ <dd id="favorites"></dd>
+ <dt>Hometown:</dt>
+ <dd id="hometown"></dd>
+ </dl>
<script>
document.body.style.fontFamily = 'Arial, sans-serif';
- document.getElementById('nickname').innerHTML = 'Pamela Fox';
- document.getElementById('favorites').innerHTML = '27';
- document.getElementById('hometown').innerHTML = 'Pasadena, CA';
- var items = document.getElementsByTagName('li');
+ document.getElementById('nickname').textContent = 'Pamela Fox';
+ document.getElementById('favorites').textContent = '27';
+ document.getElementById('hometown').textContent = 'Pasadena, CA';
+ var items = document.getElementsByTagName('dt');
for (var i = 0; i < items.length; i++) {
items[i].className = 'listitem';
}
diff --git a/jsweb/exercises/dom_manipulation_advanced.html b/jsweb/exercises/dom_manipulation_advanced.html
index a9dd0800..a8a1bfc7 100644
--- a/jsweb/exercises/dom_manipulation_advanced.html
+++ b/jsweb/exercises/dom_manipulation_advanced.html
@@ -125,11 +125,14 @@
<body>
<h1>About Me</h1>
- <ul>
- <li>Nickname: <span id="nickname"></span>
- <li>Favorites: <span id="favorites"></span>
- <li>Hometown: <span id="hometown"></span>
- </ul>
+ <dl>
+ <dt>Nickname:</dt>
+ <dd id="nickname"></dd>
+ <dt>Favorites:</dt>
+ <dd id="favorites"></dd>
+ <dt>Hometown:</dt>
+ <dd id="hometown"></dd>
+ </dl>
</body>
</html>
@@ -137,7 +140,7 @@
Add a script tag to the bottom of the HTML body.
(In the JavaScript) Change the body tag's style so it has a font-family of "Arial, sans-serif".
(In the JavaScript) Replace each of the spans (nickname, favorites, hometown) with your own information.
- Iterate through each li and change the class to "list-item".
+ Iterate through each dt and change the class to "list-item".
(In the HTML head) Add a style tag that sets a rule for .list-item to make the color red.
Create a new img element and set its src attribute to
a picture of you. Append that element to the page.
@@ -159,18 +162,21 @@
<body>
<h1>About Me</h1>
- <ul>
- <li>Nickname: <span id="nickname"></span>
- <li>Favorites: <span id="favorites"></span>
- <li>Hometown: <span id="hometown"></span>
- </ul>
+ <dl>
+ <dt>Nickname:</dt>
+ <dd id="nickname"></dd>
+ <dt>Favorites:</dt>
+ <dd id="favorites"></dd>
+ <dt>Hometown:</dt>
+ <dd id="hometown"></dd>
+ </dl>
<script>
document.body.style.fontFamily = 'Arial, sans-serif';
document.getElementById('nickname').textContent = 'Princess Bubblegum';
document.getElementById('favorites').textContent = 'science, music, my candy subjects';
document.getElementById('hometown').textContent = 'Candy Kingdom';
- var items = document.getElementsByTagName('li');
+ var items = document.getElementsByTagName('dt');
for (var i = 0; i < items.length; i++) {
items[i].className = 'list-item';
}