<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <style> .left, .right { width: 300px; height: 120px; } .left div, .right div { width: 100px; height: 90px; padding: 5px; margin: 5px; float: left; border: 1px solid #ccc; } .left div { background: #bbffaa; } .right div { background: yellow; } </style></head><body> <h2>动态创建元素节点</h2> <button>点击通过jQuery动态创建元素节点</button> <script type="text/javascript"> var $body = $('body'); $body.on('click', function() { //通过jQuery生成div元素节点 var div = $("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>") $body.append(div) }) // var body = document.querySelector('body'); // document.addEventListener('click',function(){ // //创建2个div元素 // var rightdiv = document.createElement('div') // var rightaaron = document.createElement("div"); // //给2个div设置不同的属性 // rightdiv.setAttribute('class', 'right') // rightaaron.className = 'aaron' // rightaaron.innerHTML = "动态创建DIV元素节点"; // //2个div合并成包含关系 // rightdiv.appendChild(rightaaron) // //绘制到页面body // body.appendChild(rightdiv) // },false) </script></body></html>
- 1 回答
- 1 关注
- 1346 浏览
添加回答
举报
0/150
提交
取消