jQuery Append

PrinceTaz · December 13, 2014

I am trying to create a webpage and I've added some jQuery to it but it is not working, can you help me out?

JS File:

$(document).ready(function() {
	$('#button').click(function() {
		var toAdd = $('input[name=add]').val();
		$('.message').append("<li>" + toAdd + "</li>")
	});
});

HTML:

<html>
<head>
<title>
Test page
</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type='text/javascript' src='script.js'></script>

</head>
<body>
<div class="top-section">
		<div class="top-back">
			<div class="tcontent">
				<div class="tcontent-body">
					<h1>Welcome to the Forum Pioneer Test Page</h1>
					<ul>
						<li>This will be a list of to do's.</li>
						<li>Add your own list below</li>
					</ul>
					<form>
						<input type="text" name="add" value="Type Here">
					</form>
					<div id="button">Add</div>
					<div id="message">d</div>
				</div>
			</div>
		</div>
	</div>

</body>
</html>

I've put only the elements that are affected. I try clicking the button, but the content isn't appended.

kicken · December 13, 2014

You use .message in your jQuery code which is going to look for elements with class="message". Your element however is id="message which means you need to be using #message to reference it.

You're also generating invalid HTML since your adding <li> tags inside a <div> tag which is not allowed. Either make your div a list (ul or ol) or use something other than li tags.

PrinceTaz · December 13, 2014

Aha, thank you, it works now.

Well I already have a <ul> and I want to add the <li> in there.

Sign In

jQuery Append

Recommended Posts

PrinceTaz

Link to comment

Share on other sites

kicken

Link to comment

Share on other sites

PrinceTaz

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information