在我們制作網頁的過程中,想要在某個頁面中的某一元素中添加新的內容,而不想改動那個頁面,我們一般會直接在全局的jsz中直接加入document.getElementById("指定id")來給定指定元素新的內容,但在一些頁面中沒有指定id的div元素瀏覽器就會報錯,影響后面的代碼執行,
所以為了防止瀏覽器因為找不到指定名稱的div元素而報錯,我們需要在全局的js文件中判斷哪些頁面存在指定名稱的元素再對其追加更豐富的內容.
示例:
假設我們想要判斷頁面中是否存在id名稱為qtool-abcde的div元素該怎樣實現?
1、js實現方法:
if(document.getElementById('qtool-abcde')) {
//找到元素
} else {
// 未找到元素執行的內容
}
2、使用jQuery插件實現則更為簡單些:
在jquery插件中,存在的完善的代碼處理機制,即使在網頁中獲取不到元素可能也不會報錯,所以如果我們直接按照if($("#qtool-abcde")){}這樣寫來判斷元素是否存在是錯誤的,會一直執行下去不管元素是否存在.因為$("#qtool-abcde")獲取的是對象,不管頁面中是否有這個元素
所以我們應該按以下代碼來判斷:
if($("#qtool-abcde").length > 0) {
//找到元素
} else {
// 未找到元素則
}
引入jQuery插件后只需要判斷元素的長度是否為0則能夠得出指定名稱的div元素是否存在,而且還可以像($("#qtool-abcde img").length這樣來組合檢測頁面id為qtool-abcde的元素中是否存在圖片標簽等.
當我們想要在qtool-abcde元素中增加一段新的文本時可以這樣:
if($("#qtool-abcde").length > 0) {
$("#qtool-abcde").append("這是一段新的文字噢~~~.");
} else {
}
在jq中可以很方便的使用append()、prepend() 、after()、before()方法分別來在被選擇的元素結尾、開頭、之后、之前的位置添加新的文字或元素.