Heim > Artikel > Web-Frontend > html综述一 jQuery基础使用（动态在body中创建div节点）_html/css_WEB-ITnose
html综述一 jQuery基础使用（动态在body中创建div节点）_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:21:231017Durchsuche
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> Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：HTML行类元素与块级元素_html/css_WEB-ITnoseNächster Artikel：Python自学之2016.4.9_html/css_WEB-ITnose