新增、刪除、替換、插入到某個節點的方法（js、jq）
阿新 • • 發佈：2018-12-19
首先說下，具體用得到的方法： js： appendChild() //新增
removeChild() //刪除節點
insertBefore（插入節點，被插節點） //插入（前插後）
replaceChild（新節點,舊節點） //替換（前替換後）
jq： append() （舊節點新增新節點後面） appendTo() （新節點新增到舊節點後面） prepend() （舊節點新增新節點的前面） prependTo() （新節點新增到舊節點的前面） //新增
remove() （//清空：） empty() //刪除
after() ______// 舊節點後面插入 新節點 before() ______ //舊節點前面插入 新節點 insertAfter() ________//新節點插到舊節點後 insertBefore() _________//新節點插到舊節點前 //插入
replaceWith() //替換
以下是案例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>節點</title> <style> button{ margin-left:10px; } span{ display: inline-block; width: 20px; text-align: center; border: 1px solid; } li{ float: left; display: block; width: 100px; border:1px solid; } </style> </head> <body> <div id="js"> <ul id="jspNode"> <li id="jsDel"> 1、刪除節點 <p>我要死了</p> </li> <li id="jsAdd"> 2、增加節點 <p>我要多一個兄弟了</p> </li> <li id="jsInt"> 3、插入節點 <p>我的兄弟要進來了</p> </li> <li id="jsChg"> 4、替換節點 <p>換一個吧</p> </li> </ul> <button>刪除</button> <button>增加</button> <button>插入</button> <button>替換</button> </div> <div style="clear: both;"></div> <div id="jq"> <ul id="jqpNode"> <li id="jqDel"> 1、刪除節點 </li> <li id="jqAdd"> 2、增加節點 </li> <li id="jqInt"> 3、插入節點 </li> <li id="jqChg"> 4、替換節點 </li> </ul> <button>刪除</button> <button>增加</button> <button>插入</button> <button>替換</button> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <!-- 注意：如果你直接複製所有程式碼到本地，上述js路徑需要改成你本地的 --> <script> //js node 節點操作 let pNode = document.getElementById('jspNode'); //節點獲取 let jsDel = document.getElementById('jsDel'); let jsAdd = document.getElementById('jsAdd'); let jsInt = document.getElementById('jsInt'); let jsChg = document.getElementById('jsChg'); //按鈕獲取 let jsBtn = document.getElementById('js').getElementsByTagName('button'); let jqBtn = document.getElementById('jq').getElementsByTagName('button'); var creLi = document.createElement('li'); var newP = document.createElement('li'); //建立的如插入或刪除節點內容 creLi.innerHTML = ` 增加出來的節點 <p>大家好，我剛剛出生，第一次做人，就多指教</p> `; newP.innerHTML = `<p>我是替換後的結果</p>` //刪除節點 jsBtn[0].onclick = function () { pNode.removeChild(jsDel); } //新增節點 jsBtn[1].onclick = function () { //新增要有來源，所以需要先建立 pNode.appendChild(creLi) //在節點的末尾新增，如果是以存在節點，則刪除原有節點，新增至新增處。 } //插入節點 jsBtn[2].onclick = function () { pNode.insertBefore(creLi,jsInt) //前插後的節點之上 } //替換節點 jsBtn[3].onclick = function () { pNode.replaceChild(newP,jsChg) //前替換後 } //jq node 操作 //幾種刪除節點的方法 $("#jq button").eq(0).click(function () { // var $li=$("#jqDel").remove();//刪除ul節點中"刪除節點"節點 //$("#jqpNode").append($li);//把剛刪除的元素節點從新新增到ul元素中去 // $("#jqDel").empty();//清空"刪除節點"節點元素的內容/ }) //幾種新增節點的方法 $("#jq button").eq(1).click(function () { // $("#jqAdd").append("<b>向li元素中追加《b》</b>");//向li元素中追加《b》 // $("<b>將《b》追加到li元素中</b>").appendTo("#jqAdd");//將《b》追加到li元素中 // $("#jqAdd").prepend("<b>前置《b》</b>");//向li中前置《b》 // $("<b>《b》前置到li元素中</b>").prependTo("#jqAdd");//將《b》前置到li元素中 }) //插入節點： $("#jq button").eq(2).click(function () { // $("#jqInt").after("<li>插入</li>") //向每個匹配元素的後面新增內容 // $("#jqInt").before("<li>插入</li>") // 向每個匹配元素的前面新增內容 // $("<li>插入</li>").insertAfter("#jqInt") //把所有匹配的元素插入到另一個、指定的元素元素集合的後面。 // $("<li>插入</li>").insertBefore("#jqInt") //把所有匹配的元素插入到另一個、指定的元素元素集合的前面。 }) //替換節點 $("#jq button").eq(3).click(function () { // $("#jqChg").replaceWith("<li>替換成功</li>"); }) </script> </body> </html>