zoukankan      html  css  js  c++  java
  • 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(涂聚文)
  • 相关阅读:
    JavaScript中的十种操作符
    数据类型即其相互转换
    理解CSS中position的各个值
    理解JavaScript中的this
    理解JavaScript中的回调函数
    hdu-1248-寒冰王座
    ny-71-独木舟上的旅行
    ny-47-过河问题
    ny-14-会场安排问题
    ny-47-喷水装置(一)
  • 原文地址:https://www.cnblogs.com/geovindu/p/15339012.html
Copyright © 2011-2022 走看看