How to create content(bulleted list) in JQuery? The content I create using string does not look like list. How should I modify the code?
Question
On my page when I click on the Course Title, Course Description has to be displayed in a div(with id="prgdesc_rest"). When the course description is just one sentence(without any li tags) the result is fine(see image 1).
But when course description contains ul li-this just displays these tags as it is(see image 2).
I want to do some string manipulation and create the ul and li elements on the fly. What code should be written in my_jquery_functions2.js so that it should look like bulleted list(see image 3)?
--coursesPage.jsp--
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset="utf-8">
<title>Insert title here</title>
<script src="css/jquery.min.js"></script>
<script src="css/bootstrap.min.js"></script>
<script type='text/javascript' src='css/jquery.marquee.min.js'></script>
<script src="css/my_jquery_functions2.js"></script>
<script>
var courseObj = JSON.parse('{ "courses":[{"courseId":"1001","courseTitle":"Core Java","courseDescription":"Core Java, OOPs, Multithreading, IO"},{"courseId":"1002","courseTitle":"Java Web Development","courseDescription":"<ul><li>Servlet</li><li>JSP</li></ul>"}]}');
</script>
</head>
<body>
<div data-pauseOnHover="true">
<i><a href="#"><label style="color:blue" id='1001'>Core Java </label></a></i><br><br><br><br>
<i><a href="#"><label style="color:blue" id='1002'>Java Web Development </label></a></i><br><br><br><br>
</div>
You clicked
<div id="pdesc"><span style="color:blue" id="prgdesc_before"></span>-<br><br><br><br>
Course Description
<div id="prgdesc_rest">
<ul><li>Chapter 1</li><li>Chapter 2</li></ul>
</div></div>
</body>
</html>
--my_jquery_functions2.js--
$(window).load(function(){
for (var i = 0; i < courseObj.courses.length; i++) {
var courseId = courseObj.courses[i].courseId;
var courseDescription = courseObj.courses[i].courseDescription;
$("#" + courseId).data('course_index', i);
$("#" + courseId).click(function() {
var course_index = $(this).data('course_index');
$("#prgdesc_before").text(courseObj.courses[course_index].courseTitle);
$("#prgdesc_rest").text(courseObj.courses[course_index].courseDescription);
});
}
});
1 answers
solution1
0 ACCPTED 2016-02-15 08:45:43
Use .html() rather than .text() when setting the content. .text() escapes any HTML that is passed to it so it displays like your second image
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.