Generated HTML by javascript is not formatted correctly

Question

I want to make a input field where I can search for friends in a list, these friends I retrieve from a xml file and I generate them using javascript

The code I generate this 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 the problem I'm facing I have demonstrated in a jsfiddle: https://jsfiddle.net/x897pv9o/

As you can see if you type in "j" in the top input bar it hides all friends but type "j" in the bottom one it will still display "Joske"

This is 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 I make them format correctly?

You can use trim() to trim whitespaces before appending the textnode. — Shaunak D
– Shaunak D, Commented May 11, 2015 at 16:20
I slightly modified your source. Use <a><p> Joske: Offline</p></a> instead of <p><a> because I see it adds a blank line for your source list (inspect element in web browser). Maybe is about your style def. — ares777
– ares777, Commented May 11, 2015 at 16:23

Thriggle · Accepted Answer · 2015-05-11 16:33:22Z

1

As Shaunak D mentioned in a comment, you can use .trim() to remove preceding and trailing whitespace, including new lines, from text. You can either use this on your text content when creating the node, or use it in your search function to 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();
    });
});

answered May 11, 2015 at 16:33

Thriggle

7,0692 gold badges29 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Generated HTML by javascript is not formatted correctly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related