js怎樣添加、移除、移動、複製、建立和尋找節點

標籤：cto   last   body   rtb   innerhtml   clone   直接   ref   簽名   

（1）建立新節點

    

var para=document.createElement("p"); //建立新的 <p> 元素var node=document.createTextNode("這是新段落。"); //建立了一個文本節點para.appendChild(node); //向 <p> 元素追加這個文本節點var element=document.getElementById("div1");//向一個已有的元素追加這個新元素element.appendChild(para); //向這個已有的元素追加新元素

 

（2）添加、移除、替換、之前插入、之後插入、複製

      appendChild()

      removeChild()

      replaceChild()           //replaceChild(new_child,old_child)

      insertBefore()

      insertAfter()

      cloneNode()       //不是在父元素下操作     obj.cloneNode()    //obj是指要複製的元素 cloneNode() 傳入boolean值 true代表複製obj.innerHTML值

（3）尋找

      document.getElementsByTagName("")    //通過標籤名稱

      document.getElementsByName("")    //通過元素的Name屬性的值

      document.getElementById("")    //通過元素Id，唯一性

 

      document.getElementsByClassName("");  //通過類尋找

      document.querySelector("")

 

 <div class="box"></div>
<div id="box-one">
<p id="p1">p1p1p1p1</p>
</div>

<script type="text/javascript">
//建立節點
var parent=document.createElement("div");
var text=document.createTextNode("這是第一個使用createTexxtNote建立的文本");
parent.appendChild(text);
//console.log(parent)




//向元素中添加節點
var grandpa=document.querySelector(".box");
//console.log(grandpa)
grandpa.appendChild(parent);






//向元素後 添加節點
var p=document.createElement(‘p‘);
var html=document.createTextNode("在元素後邊添加的代碼");
p.appendChild(html)
insertAfter(p,grandpa);
function insertAfter( newElement, targetElement ){ 
// newElement是要追加的元素 targetElement 是指定元素的位置 
var grandpa = targetElement.parentNode; // 找到指定元素的父節點 
if( grandpa.lastChild == targetElement ){ // 判斷指定元素的是否是節點中的最後一個位置 如果是的話就直接使用appendChild方法 
grandpa.appendChild( newElement, targetElement ); 
}else{ 
grandpa.insertBefore( newElement, targetElement.nextSibling ); 
}; 
}; 






//向元素前 添加節點insertBefore
var h6=document.createElement("h6");
var htext=document.createTextNode("在元素之前添加h6");
h6.appendChild(htext);
//console.log(htext);
console.log(grandpa)
parent.parentNode.insertBefore(h6,parent);//運用同級的方法在同級元素之前插入







//元素內部的前面插入節點insertBefore
function inhoutEle() { 
var oTest = document.getElementById("box-one"); 
var newNode = document.createElement("div"); 
var reforeNode = document.getElementById("p1"); 
newNode.innerHTML = " 元素內部的前面插入節點 "; 
oTest.insertBefore(newNode,reforeNode); // 建立的元素節點插入到 id為p1的元素前面 
} inhoutEle()


//元素內部的後面插入節點appendChild
function inqianEle() { 
var oTest = document.getElementById("box-one"); 
var newNode = document.createElement("div"); 
var reforeNode = document.getElementById("p1"); 
newNode.innerHTML = " 元素內部的前面插入節點 "; 
oTest.appendChild(newNode,reforeNode); // 建立的元素節點插入到 id為p1的元素前面 
} inqianEle()
</script>

 

js怎樣添加、移除、移動、複製、建立和尋找節點