Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Pagination & Content Filter

Xu Cheng
Xu Cheng
5,038 Points
Posted by Xu Cheng
Xu Cheng
5,038 Points

Cannot append search into HTML through Javascript

I am trying to do Project 2. For appending pagination stuff it's fine, but when I try to append search it is not working,

For my search builder part, my code is

function searchBuilder(){ var search = '<div class="student-search"><input id="search" placeholder="Search for students..."><button>Search</button></div>';
$('.page' > '.page-header cf').append(search); $('.student-search button').on("click", function(){ var searchInput = document.getElementById("search"); var CannotFind = true; for(i=0; i<studentNumber; i++){ studentList.children[i].style.display = "none"; var studentName = studentList.children[i].getElementsByTagName("h3")[0].firstChild.nodeValue; if (searchInput.value === studentName){ studentList.children[i].style.display = "block"; CannotFind = false; }

...................

So for this function the first three lines are trying to add search into HTML.

However it is not showing up in my page. I don't know what happen. I use basically the same method as I implement pagination.

The according HTML part is

<body> <div class="page">

    <div class="page-header cf">
    <h2>Students</h2>
    </div>

Thanks