Jack Jack - 3 months ago 10
HTML Question

JQuery dynamic html page

When the button is pressed i would like for another div tag to appear on the screen for the user. I have tried and looked through many web pages to see what is going wrong. There is no error on the console for the webpage. Here is the HTML code and JavaScript code.

/*jslint browser: true*/
/*global $, jQuery, alert*/

$("buttonId").click(function () {
var structure = $("<div>Hello world</div>");
$("#newDiv").append(structure);
document.getElementById("div01").style.backgroundColor = "red";
});



<html>
<head>
<link rel="stylesheet" href="site.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>

<body>
<nav>
<p class="logo"> Logo! </p>
<ul id="ul01">
<li><a href="#" class="active">NewsFeed</a></li>
<li><a href="#">Discover</a></li>
<li><a href="#">Following</a></li>
</ul>
<div class="logIn">
<a href="#"> Login </a>
<a href="#"> Sign Up </a>
</div>
</nav>
<a id="buttonId" href="#"> Click fo anouther div!!</a>
<div id=newDiv>
<div id=div01> Hello </div>
</div>
<script src="operations.js"></script>
</body>

</html>

Answer

$("buttonId") is a selector that won't match any element (as it searches for an element with a tag buttonId).

You should change it to $("#buttonId") for it to work.