How can I wrap the element with div container if it not wrap up with?

Question

I tried to wrap the following element with div container, if it is not wrap up with.

<p class="fileDetails"><div class="filename">text goes here</div><div class="fileSize">text goes here</div></p>

How to fix this?

Answer 1

You can't put <div> elements inside of <p>s. (Down to the specs -- see also Putting <div> inside <p> is adding an extra <p> ) if you're interested.

So you'll have to switch to a <span> that's styled the way you want, or probably semantically an unordered list makes more sense.

Here's a fiddle showing how it could work.

Answer 2

Working Example: http://jsfiddle.net/ef43tgto/

You should make .filename and .fileSize <p> tags and the .fileDetails a <div>. Then you can use jQuery .wrap()

<div class="fileDetails">
    <p class="filename">text goes here</p>
    <p class="fileSize">text goes here</p>
</div>

if ( !$('.container').length ) {
    $('.fileDetails').wrap('<div class="container" />')
}