создание элемента

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>New Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
/*---1 variant---*/
//create an element
var element = $('<p id="p0">Hello World!</p>');
//add an element
$('body').prepend(element);
/*---2 variant---*/
//create an element and add an element
$('<p>', {'id': 'p1', 'text': 'Привет Мир!'}).insertAfter('#p0');
/*---3 variant---*/
$('<input>', {
id: 'b0',
type: 'button',
value: 'OK',
click: function() {
$('<p>', {'text': 'To be or not to be?'}).insertAfter('#b0');
//we change a color and a font-size of this button
$(this).css({'color': '#F00', 'font-size': '26px'});
}
}).insertAfter('#p1');
});
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>New Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
/*---1 variant---*/
//create an element
var element = $('<p id="p0">Hello World!</p>');
//add an element
$('body').prepend(element);
/*---2 variant---*/
//create an element and add an element
$('<p>', {'id': 'p1', 'text': 'Привет Мир!'}).insertAfter('#p0');
/*---3 variant---*/
$('<input>', {
id: 'b0',
type: 'button',
value: 'OK',
click: function() {
$('<p>', {'text': 'To be or not to be?'}).insertAfter('#b0');
//we change a color and a font-size of this button
$(this).css({'color': '#F00', 'font-size': '26px'});
}
}).insertAfter('#p1');
});
</script>
</body>
</html>