Head-First-JavaScript-Programming/appendix/dom.html at patch-1 · rustkas/Head-First-JavaScript-Programming

35 lines (31 loc) · 761 Bytes

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title> Doing more with the DOM </title>
  <script>
window.onload = function() {

	//
	//  matches the first li element with the class "song"
	//
	var li = document.querySelector("#playlist .song");

	console.log("Matched the song " + li.innerHTML);


	// 
	// create a new element and add it to the page
	//
	var newItem = document.createElement("li");
	newItem.innerText = "Your Random Heart";
	var ul = document.getElementById("playlist");
	ul.appendChild(newItem);
}
  </script>
</head>
<body>
<ul id="playlist">
<li class="song">Blue Suede Strings</li>
<li class="song">Great Objects on Fire</li>
<li class="song">I Code the Line</li>
<li class="song">That'll be the Data</li>
</ul>
</body>
</html>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Expand file tree

Search code, repositories, users, issues, pull requests...

FilesExpand file tree

dom.html

Latest commit

History

dom.html

File metadata and controls

Expand file tree