Rumah >hujung hadapan web >html tutorial >html综述一 jQuery基础使用（动态在body中创建div节点）_html/css_WEB-ITnose
html综述一 jQuery基础使用（动态在body中创建div节点）_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:21:231062semak imbas
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> Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：HTML行类元素与块级元素_html/css_WEB-ITnoseArtikel seterusnya：Python自学之2016.4.9_html/css_WEB-ITnose