Styling innerHTML output

Question

I'm trying to create a JavaScript program using the innerHTML function wherein the user types in the first and last names of somebody in two text-boxes and the the JavaScript manipulates the names after clicking a button to the following format:

Last Name, First Name.

I have successfully gotten the names to appear 'onclick' in that order, but the output looks like this:

Dick

,

Philip

.

I want everything to be on one line without breaks. I have already tried creating a css class that would affect the div: .nobr { white-space:nowrap; } This didn't work, however.

The HTML that I'm working with so far looks like this:

    <div id='displayName2'></div>,<div id='displayName1'></div>.

Answer 1

To get those two <div> tags to appear without a linebreak in between, use the CSS attribute display: inline; Or, use <span> tags instead of <div>, since <span> is displayed inline by default, where <div> is a block element. Semantically, <span> is probably more appropriate., but if you cannot change the HTML, modify your CSS accordingly:

<div id='displayName2'></div>,<div id='displayName1'></div>

#displayName2, #displayName1 {
   display: inline;
}

Answer 2

Use <span>s instead of <div>s for this purpose.

If you insist on using <div>s, then use display: inline to make the <div>s render as inline elements.