<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<h1>Course Catelog</h1>
<h3>Below is a list of course offerings to choose from</h3>
<div id="course_name">
<input type="textbox"></input>
</div>
<div id="div1" class="div_next">
<button id="btn_1">Add Course</button>
</div>
<div id="statement">
<h3></h3>
</div>
<div>
<p>Below is a list of all the available courses <br>
that can be enrolled in this semester:
</p>
</div>
<ul id="courses">
<li>Sociology</li>
<li>Psychology</li>
<li>Mathematics
<ul id="math_subjects">
<li>Algebra</li>
<li>Geometry</li>
<li>Calculus</li>
</ul>
</li>
<li>Sciences
<ul id="science_subjects">
<li>Geology</li>
<li>Physics</li>
<li>Chemistry</li>
</ul>
</li>
<li>World History</li>
</ul>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/custom_jquery_code.js"></script>
</body>
</html>
----------------------------------------------------------------------------------------------------
.div_next {
display: inline-block;
}
-----------------------------------------------------------------------------------------------------
$(function(){
var $inputval;
$("#div1 > #btn_1").on("click",function(){
$inputval=$("#course_name > input").val();
$("#statement > h3").text("Course Entered: "+$inputval).css("background-color","green");
});
$("#courses").find("li").on("click",function(e){
var $inputli=$("<li>"+$inputval+"</li>");
$inputli.css({"background-color":"yellow"});
$(this).after($inputli);
e.stopPropagation();
});
});
Hello campers !!. I am having a difficluty in understanding the difference between append and after methods of jquery. This is a small program in which after clicking every “li” element there should appear a “li” of input text which will be with a background of yellow. The input text will have background of green color after clicking “addcourse” button. The problem is with the behaviour of append and after. If I use append it works fine. Clicking every “li” will give us another “li” of added course preceded by clicked “li”. If I use after method what happen is if for example I input text of “My Course” than I clicked “Sociology”, a “li” will be added after it. But if I again click newly added li “My Course”, no “li” is again adding up after the clicked “li”. And if I click a “li” in nested “ul” for example “Algebra” I will have the added “li” of “My Course” right after “Algebra”, and this time if I click the newly added “li” i.e "My Course, a “li” will be added but not right after the clicked “li” but AFTER the whole nested “ul” which is “Mathematics”…The motive is whenever we click any “li” there should be a “li” added right after it with background color “yellow”. Just replace the after method with append if u wanna know how the program should work.