.append not working in Notepad++
Question
I'm trying to make my own to-do list application, but the first step isn't even working! Here's my code:
<!DOCTYPE html>
<html>
<head>
<title>To-Do List</title>
<script type='text/javascript' src='script.js'></script>
<!--JAVASCRIPT-->
<script>
</script>
<script src="jquery.js"></script>
<!--JQUERY-->
<script>
$(function() {
$("#new").click(function() {
$("html").append("<div><form> Category Name: <input type = \"text\">")
});
});
</script>
</head>
<!--USER INTERFACE-->
<div>
<p id = "new">New Category</p>
</div>
<div><p>Customize</p></div>
<div><p>Save this list</p></div>
</body>
</html>
When I open the application up in Notepad++(Latest version of Chrome), nothing happens when I click on 'New Category'. Any help?
3 answers
solution1
3 ACCPTED 2013-08-14 20:59:54
You're appending a div to the html element:
$("html").append("<div><form> Category Name: <input type = \"text\">")
You should put it in the body or below, not in the html element.
$("body").append("<div><form> Category Name: <input type = \"text\">")
While some browsers may show the div anyway, you're creating an invalid structure. Sticking to a valid one is probably best.
(Note that creating this via the DOM is totally different from actually writing an HTML file with that content. There are "optional" tags in serialized HTML — such as that from a file or URL — but that's different from building an invalid structure via the DOM.)
It's also probably a good idea to include the closing tags in the fragment you're appending:
$("body").append("<div><form> Category Name: <input type = \"text\"></form></div>")
// Here ------------------------------------------------------------^^^^^^^^^^^^^
...although in my experiment jQuery didn't care.
solution2
0 2013-08-14 21:03:12
You must put a <body> tag after your </head> . And it's working.
solution3
0 2013-08-14 21:04:06
Do you have jquery locally in your project folder? Your relative script path indicates so. I created what you have in jsfiddle (including jquery), and it works as expected: http://jsfiddle.net/3qjFg/
HTML
<div>
<a href="#" id="new">New Category</a>
</div>
<div>
<p>Customize</p>
</div>
<div>
<p>Save this list</p>
</div>
jQuery
$(function() {
$("#new").on("click", function(event){
event.preventDefault();
$("body").append("<div><form> Category Name: <input type = \"text\">");
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.