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(涂聚文)