<!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>
為什么點了按鈕沒有反應？
joyboy0405
2016-09-08 08:47:01
