CODEWITHSUNDEEP
javascript
Vince
Vince

Reputation: 3

Issue creating a list in the DOM

My assignment is to create html inside the javascript with the DOM. I am having difficulties getting the list loaded and have tried multiple ways to get it going. Im including my attempts as the error so it can be easily spotted. The exact instructions of the assignment are;

a.Add an h1 element and give it the text "My Generated Document"

b.Add two p elements to the document after the h1 and put some latin text as the content.

c.Assign the first p element an id of "para1".

d.Create an ul element and add it after the

elements. Fill the list with 4 li that list your favorite things to do.

e.Assign all of the list items a class of "fav".

f.Insert a 5th li with another favorite thing as content just before the 4th li. Do not assign it a class attribute.

g.Give all the li tags with a class of "fav" a font-family: Arial, Helvetica, sans-serif and a font-size: 14px style

h.Give the p element with the id of "para1" a black solid border of a size of your choosing and a yellow background color.

<!DOCTYPE html>
<html>
<head>
<title>Generator</title>
<meta charset="utf-8">
</head>
<body id = "page">
<script type="text/javascript" src="js/generator.js">

window.onload = function () {
var body = document.getElementById("page");
var h1 = document.createElement("h1");
h1.innerHTML = "My Generated Document";
body.appendChild(h1);
var para1 = document.createElement("p");
para1.id = "para1";
para1.innerHTML = "Lorem ipsum jibba jabba";
body.appendChild(para1);
var p = document.createElement("p");
p.innerHTML = "Curabitur blah blah";
body.appendChild(p);
var ul = document.createElement("ul");
var li1 = document.createElement("li");
li1.className = "fav";
li1.innerHTML = "One";
ul.appendChild(li1);
var li2 = document.createElement("li");
li2.className = "fav";
li2.innerHTML = "Two";
ul.appendChild(li2);
var li3 = document.createElement("li");
li3.className = "fav";
li3.innerHTML = "Three";
ul.appendChild(li3);
var li4 = document.createElement("li");
li4.className = "fav";
li4.innerHTML = "Four";
ul.appendChild(li4);
var li5 = document.createElement("li");
li5.innerHTML = "Five";
ul.appendChild(li5);
ul.insertBefore(li4, ul[3]);
body.appendChild(ul);

}

</script>
</body>
</html>

Upvotes: 0

Views: 130

Answers (1)

Mikl X
Mikl X

Reputation: 1249

Looks like you forgot to add ul to the body: body.appendChild(ul)

Upvotes: 1

Related Questions