JavaScript创建新节点和操作属性
通过JavaScript原生接口创建节点,在处理上是非常复杂与繁琐的.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>练习</title> <!-- 用到的知识点: 01...创建元素document.createElement 02...设置属性addAttribute 03...添加文本document.innerHTML 04...加入文档appendChild 05...给元素添加事件句柄document.addEventListener 06...给节点添加类名className --> <style> .div1{ width: 100px; height: 100px; background-color: pink; } .newdiv{ width: 200px; height: 200px; background-color: blue; } </style> </head> <body> <div class="div1">点击此处区域会动态创建节点</div> <script> var body = document.querySelector("body") document.addEventListener("click",function(){ var yuansu = document.createElement("div"); yuansu.className="newdiv"; yuansu.innerHTML = "这是创建出来的新的div"; body.appendChild(yuansu); },false); </script> </body> </html>
jQuery创建新节点及操作属性
我们通过jQuery把上面的代码改造一下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>节点的创建与属性的处理</title> <script src="../jQuery库/jquery-3.3.1.js"></script> <!-- 用到的知识点: 01...给元素添加事件句柄:on 02...加入文档:append --> <style> .hello{ width: 200px; height: 200px; background-color: pink; } .world{ width: 100px; height: 100px; background-color: blue; } </style> </head> <body> <div class="hello">点击body区域可以动态创建节点</div> <script> $('body').on("click",function(){ var div = $("<div class='world'>这是新的div</div>"); $('body').append(div); }) </script> </body> </html>
这就是jQuery创建节点的方式,让我们保留HTML的结构书写方式,非常的简单、方便和灵活