Add a <p> </p> to plain text in HTML

Question

I have a small snippet of HTML

<div id="description"> Text with not paragraph tag</div>

Is there any way in CSS or JQUERY to address this?

Answer 1

You can style all the text on a page using the BODY css property, eg:

body {
 font-size: 1.3em;
}

That would apply to all the text contained on the HTML page. It really is better to encapsulate the text inside properly formatted HTML, though ;)

Answer 2

wrapInner() is what you're after I think

$("#description").wrapInner('<p></p>');

will result in

<div id="description"><p>Text with not paragraph tag</p></div>

Answer 3

You actually don't need JQuery to do this (though Russ Cam has pointed out that JQuery can do this quickly and easily with only one function call), it is easy enough to do without.

var tag = document.getElementByID( "description" );
var originalHTML = tag.innerHTML;
tag.innerHTML = "<p>" + originalHTML + "</p>";

As to using CSS, it is something which is doable, but it is not a good idea. Generally, it is best to use the actual HTML in this case.

However, if you merely want to address that tag:

#description{
    padding-top: 10px;
}