<!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>