Dynamically create a div element with JavaScript/jQuery

<!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 id="innerdiv" class="border pad">Hi there!</div>');

	 $('<div id="innerdiv" class="border pad">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 id="geovindu"></div>
<div id="outerdiv"> </div>
<div id="du"></div>
</body>
</html>

哲学管理(学)人生, 文学艺术生活, 自动(计算机学)物理(学)工作, 生物(学)化学逆境, 历史(学)测绘(学)时间, 经济(学)数学金钱(理财), 心理(学)医学情绪, 诗词美容情感, 美学建筑(学)家园, 解构建构(分析)整合学习, 智商情商(IQ、EQ)运筹(学)成功.---Geovin Du(涂聚文）