html综述一 jQuery基础使用（动态在body中创建div节点）_html/css_WEB-ITnose
- WBOY원래의
- 2016-06-24 11:21:231057검색
1 动态创建节点
详细说明请查看点击此处查看
<!DOCTYPE html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title> 这是使用 jquery的第一个案例 </title> <style> .hh{ width: 200px; height:1 00px; padding: 10px; margin: 5px; float: left; border: 2px solid #ccc; background: #bbffaa; } </style></head><body> <h1>动态创建div节点</h1><!-- 创建div标签 并引用 我们定义的样式 --> <div class="hh"> <div class="addDiv">点击页面会动态创建元素节点 </div> </div> <script type="text/javascript"> //从DOM选取元素 var body = document.querySelector('body'); //为document添加点击事件 document.addEventListener('click',function(){ //创建两个div var div1 = document.createElement('div') var div2 = document.createElement("div"); //设置属性 div1.setAttribute('class','hh') div2.className='addDiv' //向div中添加文本 div2.innerHTML="动态创建div"; //设置加入文档，也就是包含关系 div1.appendChild(div2) body.appendChild(div1) },false) </script></body></html> 성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.