[学习笔记]_js以及jQuery动态创建节点及节点属性设置等操作

1. js与jQuery动态创建节点、设置属性并添加至DOM

• js 插入子节点

    

        
本来存在于页面的div
    

• jQuery
  1.创建节点
  创建文本节点：$("
  直接将文本的内容添加进去
  ")；
  创建节点并给节点添加属性：

var div = $("
jquery动态创建DIV元素节点
")

2.将节点添加到文档DOM中

• 2.1 添加至dom内部（作为子节点）

append()
appendTo()
tip：两种方法功能相同——它们都将被插入到目标容器的末尾。主要的不同是语法——内容和目标的书写位置不同

    
通过append与appendTo添加元素
    点击通过jQuery的append添加元素
    点击通过jQuery的appendTo添加元素
    

         
    

prepend()
prependTo()
tip:在指定元素的开头处插入新的节点：

• 2.2 添加至dom外部（作为兄弟节点）
  after() - 在被选元素之后插入内容
  before() - 在被选元素之前插入内容
  tip：以上两个方法都支持同时插入多个元素

insertAfter（）
insertBefore（）
tip：以上方法都不支持多参数，当有参数时只有第一个参数被执行

    
通过insertBefore与insertAfter添加元素
    点击通过jQuery的insertBefore添加元素
    点击通过jQuery的insertAfter添加元素
    

        
测试insertBefore,不支持多参数
    
    

        
测试insertAfter,不支持多参数
    
    
    
    

3. empty()–将选定节点的内容清空

$("#divid").empty();

4. remove()—DOM节点删除

$(".className").remove();

总结：

• jQuery相对于js的优势在于: jQuery的代码比较简单； 创建节点时给节点添加属性和文字时更加方便灵活； 插入节点位置更加灵活。
• 在循环添加节点时，需要将每次遍历后创建得到的子节点以及父节点存于变量中让其会根据遍历的次数不同发生变化，否则会出现第二次遍历得到的子节点被放置于第一次遍历创建的父节点下，导致页面混乱。

学习参考：
博客园
CSDN论坛