Removing automatically added line breaks when combining Javascript + HTML

<p> Is a block element by default. You can change this with CSS but use <span> instead as it is by default an inline element

You would end up with:

 $("#high-low-one").html(weather.forecasts.one.high+'<span class="high-low-divider">|</span>'+weather.forecasts.one.low);    

However I would style the temps in span elements and use the :after pseudo-element to add and style the pipe character.

Something like:

$("#high-low-one").html("<span class='high'>" + weather.forecasts.one.high + "</span><span class='low'>" + weather.forecasts.one.low + "</span>");

With some sample css:

#high-low-one .high
{
    color:#F00;    
}

#high-low-one .high:after
{
    content: "|";
    color: #0F0;
    padding-left:0.5em;
    padding-right:0.5em;
}

#high-low-one .low
{
    color:#00F;    
}

Which would give you something like: http://jsfiddle.net/D29AH/

For Completeness if you really had to use <p> use the following CSS

.high-low-divider
{
    display:inline;
}