093 DOM節點動態建立 新增和刪除

2021-10-14 03:57:44 字數 1622 閱讀 2120

1. 建立節點

1.1. 建立元素

document.createelement(tagname);
1.2. 建立文字

document.createtextnode("這是新文字。");
2. 新增節點2.2. insertbefore()方法, 在父元素的子元素前插入乙個元素。

parentelement.insertbefore(newelement, childelement);
3. 刪除節點3.1. removechild()方法, 從父元素中刪除乙個節點。

3.2. 很遺憾, dom需要同時了解您需要刪除的元素及其父。

parentelement.removechild(childelement);
3.3. 這是一種常見的解決方法: 找到你想要刪除的子, 並利用其parentnode屬性找到父:

childelement.parentnode.removechild(childelement);
4. 替換節點4.1. replacechild()方法, 從父元素中替換乙個子。

childelement.parentnode. replacechild(newelement, oldelement);
5. 屬性節點5.1. 建立屬性

var attr = document.createattribute(attributename);


// 給屬性賦值


attr.value = 'test'
5.2. setattributenode()方法用於新增新的屬性節點。如果元素中已經存在指定名稱的屬性, 那麼該屬性將被新屬性替代。如果新屬性替代了已有的屬性, 則返回被替代的屬性, 否則返回null。

element.setattributenode(attributenode)
5.3. getattributenode()方法從當前元素中通過名稱獲取屬性節點。

element.getattributenode(attributename)
5.4. removeattributenode()方法從元素中刪除指定的屬性節點。該方法從當前元素的屬性集合中刪除(並返回乙個)attr節點。用removeattribute()方法代替該方法往往會更簡單。

element.removeattributenode(attributenode)
6. 例子6.1. **

我是第乙個p節點


我是第二個p節點


刪除我替換我
6.2. 效果圖

Qt之Dom新增和修改節點

使用qtxml模組dom模式操作xml時，新增修改節點直接使用qdomelement的setnodevalue 方法不起作用，研究好久才發現使用方法有問題，正確方法如下 1 新增節點 qdomelement root doc.documentelement qdomelement newelem d...

jQuery給動態迴圈建立的dom新增事件

在使用jquery時，經常需要根據後端獲取的資料迴圈建立dom，而且給建立的某個元素新增事件 div on click function 用上面這種方式是繫結不了事件的，所以需要通過下面這種方式來繫結事件 document on click div function 但有時我們會迴圈建立幾個相同的d...

DOM操作 建立 新增 移除 移動 和查詢

var f document.creatdocumentfragment 建立dom片段 var b document.createlement 標籤名 建立具體的元素 var n document.creattextnode 文字內容 建立乙個文字節點 父元素.removechild 子元素a 在...