JavaScript實(shí)現(xiàn)自動(dòng)生成網(wǎng)頁(yè)元素功能(按鈕、文本等)
創(chuàng)建元素的方法:
- 1、利用createTextNode()創(chuàng)建一個(gè)文本對(duì)象
- 2、利用createElement()創(chuàng)建一個(gè)標(biāo)簽對(duì)象
- 3、直接利用容器標(biāo)簽中的一個(gè)屬性:innerHTML-----本質(zhì)上改該標(biāo)簽容器中的“html代碼”,不是我們認(rèn)為的對(duì)象樹的操作
詳解代碼:
<body> <input type="button" value="創(chuàng)建并添加節(jié)點(diǎn)1" onclick="addNode1()"/> <input type="button" value="創(chuàng)建并添加節(jié)點(diǎn)2" onclick="addNode2()"/> <input type="button" value="創(chuàng)建并添加節(jié)點(diǎn)3" onclick="addNode3()"/> <input type="button" value="remove節(jié)點(diǎn)1 " onclick='removenode()'/> <input type="button" value="replaceNode節(jié)點(diǎn)2替換 " onclick='remove2()'/><!--1替換2,并且1沒有保留--> <input type="button" value="clone替換 " onclick='clone()'/> <div id="div_id1">這是div模塊--</div> <div id="div_id2">必須好好地學(xué)習(xí),這樣才能讓自己有很好的回報(bào)</div> <div id="div_id3">好好干,加油↖(^ω^)↗</div> <div id="div_id4">你懂得區(qū)域,實(shí)驗(yàn)區(qū)域</div> </body>
方式一 :創(chuàng)建文本文檔
<span style="font-size:18px;">function addNode1(){
//1利用createTextNode()創(chuàng)建一個(gè)文本對(duì)象
var text=document.createTextNode("這是修改的,創(chuàng)建的文檔");
//2獲取div對(duì)象
var node1=document.getElementById("div_id1");
//添加成div對(duì)象的孩子
node1.appendChild(text);}</span><span style="font-size:24px;">
</span>
方式二:利用createElement()創(chuàng)建一個(gè)標(biāo)簽對(duì)象
function addNode2(){
//1,利用createElement()創(chuàng)建一個(gè)標(biāo)簽對(duì)象
var nn=document.createElement("input");
nn.type="button"
nn.value="創(chuàng)建的按鈕";
nn.target="_blank";
//2,獲得div對(duì)象
var node2=document.getElementById("div_id2");
//添加成div對(duì)象的孩子
node2.appendChild(nn);
}
方式三:直接利用容器標(biāo)簽中的一個(gè)屬性:innerHTML-----本質(zhì)上改該標(biāo)簽容器中的“html代碼”,不是我們認(rèn)為的對(duì)象樹的操作
function addNode3(){
var mm=document.getElementById("div_id3");
mm.innerHTML="<a ><input type='button' value='新建的按鈕'></a>";
}
- 刪除節(jié)點(diǎn)
使用 removeNode 和 removeChild 從元素上刪除子結(jié)點(diǎn)兩種方法,通常采用第二種方法
function removenode(){
var node =document.getElementById("div_id4");
// alert(node.nodeName);//DIV
// 自殺式 node.removeNode(true); //removeNode 從文檔層次中刪除對(duì)象。ie可以出現(xiàn)現(xiàn)象,一般不采用自殺式
node.parentNode.removeChild(node);////通過父節(jié)點(diǎn)去刪除它的孩子,一般常用
alert("aa");
}
- 替換 沒有保留替換的那個(gè)
function remove2(){
var node1 =document.getElementById("div_id1");
var node2 =document.getElementById("div_id2");
// node1.replaceNode(node2);//自殺式不通用
////通過父節(jié)點(diǎn)去替換它的孩子:用node1去替換node2
node1.parentNode.replaceChild(node1,node2);//object.replaceChild(oNewNode, oChildNode)
}
- clone節(jié)點(diǎn)
function clone(){
var node1 =document.getElementById("div_id1");
var node2 =document.getElementById("div_id2");
var node1_2=node1.cloneNode(true);//false只能clone基本的,不會(huì)clone下面的其他子節(jié)點(diǎn)
//克隆一個(gè)對(duì)象,默認(rèn)參數(shù)為false。參數(shù)為true時(shí),連子節(jié)點(diǎn)一起克隆
node1.parentNode.replaceChild(node1_2,node2);
}
效果圖:

全部的源代碼:
<!DOCTYPE html>
<html>
<head>
<title>DOM_operation.html</title>
<style type="text/css">
div{
border:#00f solid 1px;
width:200px;
height:100px;
}
</style>
<script type="text/javascript">
//AAAA 增
//方式一 創(chuàng)建文本文檔
function addNode1(){
//1利用createTextNode()創(chuàng)建一個(gè)文本對(duì)象
var text=document.createTextNode("這是修改的,創(chuàng)建的文檔");
//2獲取div對(duì)象
var node1=document.getElementById("div_id1");
//添加成div對(duì)象的孩子
node1.appendChild(text);
}
function addNode2(){
//1,利用createElement()創(chuàng)建一個(gè)標(biāo)簽對(duì)象
var nn=document.createElement("input");
nn.type="button"
nn.value="創(chuàng)建的按鈕";
nn.target="_blank";
//2,獲得div對(duì)象
var node2=document.getElementById("div_id2");
//添加成div對(duì)象的孩子
node2.appendChild(nn);
}
//直接利用容器標(biāo)簽中的一個(gè)屬性:innerHTML-----本質(zhì)上改該標(biāo)簽容器中的“html代碼”,不是我們認(rèn)為的對(duì)象樹的操作
function addNode3(){
var mm=document.getElementById("div_id3");
mm.innerHTML="<a ><input type='button' value='新建的按鈕'></a>";
}
//BBBBBB-------刪
//刪除節(jié)點(diǎn) 使用 removeNode 和 removeChild 從元素上刪除子結(jié)點(diǎn)兩種方法,通常采用第二種方法
function removenode(){
var node =document.getElementById("div_id4");
// alert(node.nodeName);//DIV
// 自殺式 node.removeNode(true); //removeNode 從文檔層次中刪除對(duì)象。ie可以出現(xiàn)現(xiàn)象,一般不采用自殺式
node.parentNode.removeChild(node);////通過父節(jié)點(diǎn)去刪除它的孩子,一般常用
alert("aa");
}
//替換 沒有保留替換的那個(gè)
function remove2(){
var node1 =document.getElementById("div_id1");
var node2 =document.getElementById("div_id2");
// node1.replaceNode(node2);//自殺式不通用
////通過父節(jié)點(diǎn)去替換它的孩子:用node1去替換node2
node1.parentNode.replaceChild(node1,node2);//object.replaceChild(oNewNode, oChildNode)
}
function clone(){
var node1 =document.getElementById("div_id1");
var node2 =document.getElementById("div_id2");
var node1_2=node1.cloneNode(true);//false只能clone基本的,不會(huì)clone下面的其他子節(jié)點(diǎn)
//克隆一個(gè)對(duì)象,默認(rèn)參數(shù)為false。參數(shù)為true時(shí),連子節(jié)點(diǎn)一起克隆
node1.parentNode.replaceChild(node1_2,node2);
}
</script>
</head>
<body>
<input type="button" value="創(chuàng)建并添加節(jié)點(diǎn)1" onclick="addNode1()"/>
<input type="button" value="創(chuàng)建并添加節(jié)點(diǎn)2" onclick="addNode2()"/>
<input type="button" value="創(chuàng)建并添加節(jié)點(diǎn)3" onclick="addNode3()"/>
<input type="button" value="remove節(jié)點(diǎn)1 " onclick='removenode()'/>
<input type="button" value="replaceNode節(jié)點(diǎn)2替換 " onclick='remove2()'/><!--1替換2,并且1沒有保留-->
<input type="button" value="clone替換 " onclick='clone()'/>
<div id="div_id1">這是div模塊--</div>
<div id="div_id2">必須好好地學(xué)習(xí),這樣才能讓自己有很好的回報(bào)</div>
<div id="div_id3">好好干,加油↖(^ω^)↗</div>
<div id="div_id4">你懂得區(qū)域,實(shí)驗(yàn)區(qū)域</div>
</body>
</html>
以上就是為大家分享如何通過JavaScript實(shí)現(xiàn)自動(dòng)生成網(wǎng)頁(yè)元素功能的方法,希望對(duì)大家的學(xué)習(xí)有所幫助。
- js獲取及修改網(wǎng)頁(yè)背景色和字體色的方法
- JavaScript實(shí)現(xiàn)更改網(wǎng)頁(yè)背景與字體顏色的方法
- js獲得網(wǎng)頁(yè)背景色和字體色的方法
- js調(diào)用打印機(jī)打印網(wǎng)頁(yè)字體總是縮小一號(hào)的解決方法
- JavaScript中計(jì)算網(wǎng)頁(yè)中某個(gè)元素的位置
- JavaScript動(dòng)態(tài)修改網(wǎng)頁(yè)元素內(nèi)容的方法
- 原生JS操作網(wǎng)頁(yè)給p元素添加onclick事件及表格隔行變色
- js簡(jiǎn)單實(shí)現(xiàn)調(diào)整網(wǎng)頁(yè)字體大小的方法
相關(guān)文章
js中eval方法詳解之eval方法的初級(jí)應(yīng)用
js中eval()函數(shù)可計(jì)算某個(gè)字符串,下面這篇文章主要給大家介紹了關(guān)于js中eval方法詳解之eval方法的初級(jí)應(yīng)用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-01-01
bootstrap 日期控件 datepicker被彈出框dialog覆蓋的解決辦法
這篇文章主要介紹了bootstrap 日期控件 datepicker被彈出框dialog覆蓋的解決辦法 ,本文給大家分享幾種解決方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07
javascript函數(shù)中參數(shù)傳遞問題示例探討
本節(jié)主要與大家探討下javascript函數(shù)中參數(shù)傳遞問題,有不明白的朋友可以參考下2014-07-07
js html css實(shí)現(xiàn)復(fù)選框全選與反選
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)復(fù)選框全選與反選,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10
JavaScript+CSS實(shí)現(xiàn)的可折疊二級(jí)菜單實(shí)例
這篇文章主要介紹了JavaScript+CSS實(shí)現(xiàn)的可折疊二級(jí)菜單,以完整實(shí)例形式分析了JavaScript基于頁(yè)面元素節(jié)點(diǎn)及樣式的動(dòng)態(tài)操作實(shí)現(xiàn)折疊菜單的相關(guān)技巧,需要的朋友可以參考下2016-02-02

