This is paragraph 1.
This is paragraph 2.
This is paragraph 3.
This is paragraph 4.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function inserter() {
$("#target").before("<p>This is paragraph 1.5</p>");
$("#target").after("<p>This is paragraph 2.5</p>");
}
</script>
<style type="text/css">
.code { color: red; }
.back { background-color: yellow; }
</style>
</head>
<body>
<h1>Inserting elements</h1>
<p>This is paragraph 1.</p>
<p id="target">This is paragraph 2.</p>
<p id="source">This is paragraph 3.</p>
<p>This is paragraph 4.</p>
<br>
<form>
<input type = "button" value="Insert new paragraphs" onclick="inserter()"></input>
</form>