Adding new paragraph after sibilings

Question

I am just working on a chat application and using jQuery for client site.Now,when I use this line for creating a paragraph,it adds the new paragraph before its siblings.So how can I add it after them.I used br tag but got the same result.Here`s the fiddle for the code:

fiddle

and this is the main jQuery line that I want to change.

$('#answer').html("<p>" + bla + "</p>");

Thanks.

Answer 1

Using the html function will actually replace the entire HTML content of the #answer element.

In order to append the <p> element you need to use the append() function

.append(content)
Insert content, specified by the parameter, to the end of each element in the set of matched elements.

$('#answer').append("<p>" + bla + "</p>");

Here is an updated version of your fiddle . I changed two things with your code:

1. You were attempting to manually append the new message with
   bla = bla + $('#answer').html(); . This is not necessary since we will always be adding only the new content that is in the bla variable.
2. You were overriding the entire contents of your #answer element each time the user pressed enter. All you need to do is add the new content that was in the input field.

Answer 2

Use jQuery append to add HTML content at the end. And in your case, simply fetch the contents sent by the user, present in the #send element, compose in <p> tags and append it to the #answer element.

In all, use the line

$('#answer').append("<p>" + $('#send').val() + "</p>");

And it solves your problem.