Adding CR or LF in HTML attribute

Question

To explain this shortly, I have an mouseenter Jquery event firing up an AJAX call. And a Jquery UI tooltip.

$(function()
{
    $(document).tooltip({track:true});
    $('#NewUser').mouseenter(function(){AJAXValidation("NewUser")});
});  

Here is the call:

function AJAXValidation(section)
{
    var request = $.ajax(
    {
        url: "ProcessJRT.php",
        type: "POST",
        contentType:"application/x-www-form-urlencoded;charset=UTF-8",
        data:
        {
            validate:section
        }
    });

    request.done(
        function(message)
        {
            var div = document.createElement('div');
            $(div).html(message);
            $(div).children().each
            (
                function(i)
                {
                    var title = '';

                    if($('#' + $(this).attr('id')).attr('title') != null)
                    {
                        title = $('#' + $(this).id).attr('title');
                    }

                    title += $(this).html() + '\r\n';

                    $('#' + $(this).id).attr('title', title);
                }
            );
        });
}

What it does now is it take the <div>s from message and it place them in a parent <div>. (In my code the div already exist, I changed that part so the question would stay as short as possible).

I then take the text from those <div> and I want to place them in the corresponding <input/> title attribute.

Everything work just perfect here exepte this stupid little thing:

I am unable to add a LN or a CR in the title so all the texts from the divs would be on separate line...

I have tried adding a </br> inside the attribute like this:

function(i)
{
    var title = '';

    if($('#' + $(this).id).attr('title') != null)
    {
        title = $('#' + $(this).attr('id')).attr('title');
    }

    title += $(this).html() + '</br>';//<---See I added a BR here 

    $('#' + $(this).id).attr('title', title);
}

But it display the </br> as normal text. I than tried String.fromCharCode(13) but did'nt work, I tried jus '\n' or '\r\n' and still does work.

Can someone point out were I am derping on this one??

Thanks!

EDIT:

Changed the $('#' + $(this).attr('id')) to $('#' + $(this).id).

Answer 1

Here is how I resolve my problem with the idea that @crush gave me:

First:

I removed the tooltip initialization from the function that fire the event :

$(function()
{
    $('#NewUser').mouseenter(function(){AJAXValidation("NewUser")});
});

Next:

I changed the "done" function so I would initialise a new tooltip each time with html content (FYI JQuery tooltip can format HTML)

Here what it look like now:

function(message)
{
    var div = document.createElement('div');
    $(div).html(message);

    var title = '';

    $(div).children().each
    (
        function(i)
        {
            if($('#' + $(this).id).attr('title') != null)
            {
                title = $('#' + $(this).id).attr('title');
            }

            title += $(this).html() + '</br>';

            $(document).tooltip({content:title, items:('#' + $(this).id)});
        }
    );
}