JavaScript HTML DOM 節點_ZenDei技術網路在線

JavaScript HTML DOM 節點

-Advertisement-

要向HTML DOM添加新元素，必須首先創建元素（元素節點），然後將其附加到現有元素。 appendChild()上一個示例中的方法將新元素作為父項的最後一個子項附加。如果您不希望可以使用insertBefore()方法：要將元素替換為HTML DOM，請使用以下replaceChild()方法： ...

要向HTML DOM添加新元素，必須首先創建元素（元素節點），然後將其附加到現有元素。

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>教程（jc2182.com）</title>
<body>
<div id="div1">
    <p id ="p1">這是一個段落。</p>
    <p id ="p2">這是另一段。</p>
</div>

<script>
    var para = document.createElement("p");
    var node = document.createTextNode("這是新的.");
    para.appendChild(node);
    var element = document.getElementById("div1");
    element.appendChild(para);
</script>

</body>
</html>

appendChild()上一個示例中的方法將新元素作為父項的最後一個子項附加。如果您不希望可以使用insertBefore()方法：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>蝴蝶（jc2182.com）</title>
<body>

<div id="div1">
    <p id ="p1">這是一個段落。</p>
    <p id ="p2">這是另一段。</p>
</div>

<script>
    var para = document.createElement("p");
    var node = document.createTextNode("這是新的.");
    para.appendChild(node);

    var element = document.getElementById("div1");
    var child = document.getElementById("p1");
    element.insertBefore(para,child);
</script>

</body>
</html>

要將元素替換為HTML DOM，請使用以下replaceChild()方法：

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>蝴蝶（jc2182.com）</title>
<body>

<div id="div1">
    <p id ="p1">這是一個段落。</p>
    <p id ="p2">這是另一段。</p>
</div>

<script>
    var parent = document.getElementById("div1");
    var child = document.getElementById("p1");
    var para = document.createElement("p");
    var node = document.createTextNode("這是新的.");
    para.appendChild(node);
    parent.replaceChild(para,child);
</script>

</body>
</html>

JavaScript HTML DOM 節點的增刪改查

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

javascript當中類型轉換，typeof的用法

1）類型轉換，typeof的用法例 3.1.1<HTML><head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/></head><BODY><SCRIPT LANGUAGE="JavaScript"> <! ...
js滑鼠滾輪事件上滾下滾判斷

`onmousewheel` ...
博客園美化滑鼠滾輪下滑出現小標題方便查找

一.自己給自己定的需求滑鼠滑輪移動合適位置出現小標題滑鼠下滑時候出現,滑鼠上滑時候消失淡出的效果二.代碼三.效果展示 ...
vue 的虛擬 DOM 有什麼好處？

vue 的虛擬 DOM 有什麼好處，速度快，為什麼快，因為減小了頁面渲染過程的次數 ...
【day02】Xhtml

一.HTML實體(HTML Entites) 1.HTML實體：W3C規定在瀏覽器看到的特殊符號必須用HTML實體單引號(') ' 雙引號(") " 大於(>) > 小於(<) < 連接符(&) & 不間斷空格   版權 © 商標 &reg ...
vue-awesome-swiper輪播插件

1. github上搜索vue-awesome-swiper 2. readme中有安裝方法，建議在插件名後@版本號，使用穩定的老版本 npm install [email protected] --save 3. 在項目main.js中引入 4.創建單文件組件Swiper.vue（單 ...
html當中如何引用js文件

3）html當中如何引用js文件如果需要javascript工程師和html美工各乾各的工作，需要分開寫文件。例 1.2<html><head> <script src="Hello.js"></script> <title></title></head><body></body></html>He ...
鬆軟科技web課堂:JavaScript 數據類型

字元串值，數值，布爾值，數組，對象。 JavaScript 數據類型 JavaScript 變數能夠保存多種數據類型：數值、字元串值、數組、對象等等： var length = 7; // 數字 var lastName = "Gates"; // 字元串 var cars = ["Porsche" ...