jquery - Generated HTML by javascript is not formatted correctly -

i want make input field can search friends in list, these friends retrieve xml file , generate them using javascript

the code generate with:

friendlistindiv = document.createelement("p");                     var link = document.createelement("a");                     link.onclick = function() {                         openchat(friendsxml[i].textcontent)                     };                     var friendtext = document                             .createtextnode(friendsxml[i].textcontent + ":"                                     + statusxml[i].textcontent);                     link.appendchild(friendtext);                     friendlistindiv.appendchild(link);                     frienddiv.appendchild(friendlistindiv); 

now problem i'm facing have demonstrated in jsfiddle: https://jsfiddle.net/x897pv9o/

as can see if type in "j" in top input bar hides friends type "j" in bottom 1 still display "joske"

this because these tags

<div id="friendlist"><p><a> joske: offline</a></p><p><a> tom: offline</a></p><p><a> dirk: offline</a></p></div> 

are not being formatted correctly, how can make them format correctly?

as shaunak d mentioned in comment, can use .trim() remove preceding , trailing whitespace, including new lines, text. can either use on text content when creating node, or use in search function exclude new lines.

in document.createtextnode:

var friendtext = document.createtextnode(     friendsxml[i].textcontent.trim() + ":" + statusxml[i].textcontent); 

in $('#searchinfriend').keyup:

$('#searchinfriend').keyup(function () {     var valthis = $(this).val().tolowercase();     $('#friendlist p a').each(function () {         var text = $(this).text().trim().tolowercase();         (text.indexof(valthis) == 0) ? $(this).show() : $(this).hide();     }); });