js實(shí)現(xiàn)創(chuàng)建刪除html元素小結(jié)
更新時(shí)間：2015年09月30日 10:58:23 投稿：hebedich
本文給大家簡(jiǎn)單介紹了下使用javascript和jquery實(shí)現(xiàn)創(chuàng)建刪除html元素的方法，非常的實(shí)用，有需要的小伙伴可以參考下。
如果我要?jiǎng)?chuàng)建一個(gè)div元素。
1.使用DOM對(duì)象創(chuàng)建：
使用document.createElement('div')方法創(chuàng)建元素。
2.使用JQuery創(chuàng)建：
使用$('<div>通過(guò)JQuery創(chuàng)建的新元素</div>')的方法直接創(chuàng)建元素。
如果需要將id是‘div2js'的div元素刪除。
1.使用DOM對(duì)象
首先需要找到被刪元素的父元素，通過(guò)父元素將其需要?jiǎng)h除的子元素刪除。
var el = document.getElementById('div2js');
el.parentNode.removeChild(el);
2.使用JQuery
直接找到并刪除。
$('#div2js').remove();
最后我們來(lái)看個(gè)實(shí)例
<script type="text/javascript" language="Javascript">
function InputOnBlur()
{ var name=document.getElementById("name").value;
if(name.length >10 || name.length<2)
{
var element=document.getElementById("message");
if(element)
{
//alert(element.parentNode.innerHTML);
element.parentNode.removeChild(element);
}
var MySpan=document.createElement("span");
document.getElementById("containers").appendChild(MySpan);
MySpan.id = "message";
MySpan.innerHTML = "<img src='false.jpg' alt='請(qǐng)輸入正確的姓名'/>請(qǐng)輸入正確的姓名";
}
else{
var element=document.getElementById("message");
if(element)
{
//alert(element.innerHTML);
element.parentNode.removeChild(element);
}
var MySpan=document.createElement("span");
document.getElementById("containers").appendChild(MySpan);
MySpan.id = "message";
MySpan.innerHTML = "<img src='true.gif' alt='該用戶名輸入正確'/>該用戶名輸入正確";
}
}
</script>
<div>
姓名：<input id="name" type="text" onblur="InputOnBlur()" /><span id="containers"></span></div>
<script language="javascript">
document.getElementById("containers").innerHTML = "<font color=red>請(qǐng)輸入姓名</font>";
相關(guān)文章
這篇文章主要介紹了微信小程序獲取當(dāng)前位置和城市名的思路,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-11-11
JavaScript實(shí)現(xiàn)Iterator模式實(shí)例分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)Iterator模式,實(shí)例分析了Iterator模式的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-06-06
BootStrap Datetimepicker 漢化的實(shí)現(xiàn)代碼
這篇文章主要介紹了 BootStrap Datetimepicker 漢化的實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-02-02
抽空寫(xiě)了個(gè)類似的效果，做了一定程度的封裝，雖然也只能勉強(qiáng)算個(gè)輕量級(jí)原生小插件吧，但還是分享出來(lái)，并做一步一步的教程，希望能給有需要的朋友一些幫助吧。2010-10-10
下面小編就為大家?guī)?lái)一篇JS定義類的六種方式詳解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧，祝大家游戲愉快哦2016-05-05
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)滑動(dòng)條案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
使用Math.max,Math.min獲取數(shù)組中的最值實(shí)例
下面小編就為大家?guī)?lái)一篇使用Math.max,Math.min獲取數(shù)組中的最值實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-04
原生js實(shí)現(xiàn)點(diǎn)擊輪播切換圖片
這篇文章主要為大家詳細(xì)介紹了原生js點(diǎn)擊輪播切換圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
下面小編就為大家?guī)?lái)一篇原生js封裝添加class,刪除class的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧，希望對(duì)大家有所幫助2017-11-11
js實(shí)現(xiàn)Select頭像選擇實(shí)時(shí)預(yù)覽代碼
這篇文章主要介紹了js實(shí)現(xiàn)Select頭像選擇實(shí)時(shí)預(yù)覽代碼,涉及javascript動(dòng)態(tài)遍歷及設(shè)置select選項(xiàng)的技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08