DOM 節點操做

時間 2019-11-12

標籤 dom 節點欄目 HTML 简体版

原文原文鏈接

DOM 中有一個很是重要的功能，就是節點模型，也就是 DOM 中的「M」。頁面中的元素結構就是經過這種節點模型來互相對應着的，咱們只須要經過這些節點關係，能夠建立、插入、替換、克隆、刪除等等一些列的元素操做。html

一．建立節點 app

爲了使頁面更加智能化，有時咱們想動態的在 html 結構頁面添加一個元素標籤，那麼在插入以前首先要作的動做就是：建立節點。
函數

//建立一個節點
var box=$('<div id="box">節點</div>');
spa

//將節點插入到<body>元素內部
$('body').append(box); htm

二．插入節點 ##
在建立節點的過程當中，其實咱們已經演示怎麼經過.append()方法來插入一個節點。但除了這個方法之餘呢，jQuery 提供了其餘幾個方法來插入節點。對象

//向 div 內部插入 strong 節點事件

$('div').append('節點'); rem

$('div').append(function(index,html){it

//使用匿名函數插入節點，html 是原節點io

return '節點';

});

$('span').appendTo('div'); //講 span 節點移入 div 節點內

$('span').appendTo($('div')); //同上

$('div').prepend('節點'); //將 span 插入到 div 內部的前面

$('div').append(function(index,html){

//使用匿名函數，同上

return '節點';

});

$('span').prependTo('div'); //將 span 移入 div 內部的前面

$('span').prependTo($('div')); //同上

三．節點操做
除了建立、插入和包裹節點，jQuery 還提供了一些常規的節點操做方法：複製、替換和刪除節點。
//複製節點
$('body').append($('div').clone(true)); //複製一個節點添加到 HTML 中

注意：clone(true)參數能夠爲空，表示只複製元素和內容，不復制事件行爲。而加上 true 參數的話，這個元素附帶的事件處理行爲也複製出來。

//刪除節點
$('div').remove(); //直接刪除 div 元素

注意：.remove()不帶參數時，刪除前面對象選擇器指定的元素。而.remove()本事也能夠帶選擇符參數的，好比：$('div').remove('#box');只刪除 id=box 的 div。

//保留事件的刪除節點
$('div').detach(); //保留事件行爲的刪除

注意：.remove()和.detach()都是刪除節點，而刪除後自己方法能夠返回當前被刪除的節點對象，但區別在於前者在恢復時不保留事件行爲，後者則保留。

//清空節點
$('div').empty(); //刪除掉節點裏的內容

//替換節點 $('div').replaceWith('節點'); //將 div 替換成 span 元素 $('節點').replaceAll('div'); //同上

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。