<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Dynamically create a div element with JavaScript/jQuery</title>
<script src="js/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#geovindu').append(
$('<div>').prop({
id: 'innerdiv',
innerHTML: 'Hi there! 涂聚文',
className: 'border pad'
})
);
$('#geovindu').append(
$('<div>').prop({
id: 'innerdiv',
innerHTML: 'Hi there! 涂聚文2，how',
className: 'border pad'
})
);
$('#outerdiv').append('<div >Hi there!</div>');
$('<div >Hi there!，Geovin Du</div>').appendTo('#outerdiv');
var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
var iDiv2 = document.createElement('div');
iDiv2.className = "block-2";
iDiv2.innerHTML="....du";
iDiv.appendChild(iDiv2);
var iDiv3 = document.createElement('div');
iDiv3.className = "block-2";
iDiv3.innerHTML="....du，Geovin Du";
var s = document.getElementById('du');
s.appendChild(iDiv3);
var iDiv4 = document.createElement('div');
iDiv4.className = "block-2";
iDiv4.innerHTML="....du,涂聚文语言";
var s = document.getElementById('du');
s.appendChild(iDiv4);
// Append to the document last so that the first append is more efficient.
document.body.appendChild(iDiv);
});
</script>
</head>
<body>
<div ></div>
<div > </div>
<div ></div>
</body>
</html>