原生JS實現(xiàn)動態(tài)添加新元素、刪除元素方法

更新時間：2019年05月05日 08:33:44 作者：給時光以生命

這篇文章主要介紹了原生js實現(xiàn)動態(tài)添加新元素、刪除元素方法 ,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下

1. 添加新元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>動態(tài)添加新元素</title>
</head>
<body>

<ul class="example">
 <li class="child">Coffee</li>
 <li class="child">Tea</li>
 <li class="child">Coffee</li>
 <li class="child">Tea</li>
</ul>

<script>
var child = document.getElementsByClassName("child")[0];
  var newChild = document.createElement("li");
  var newText = document.createTextNode("wine");
  newChild.appendChild(newText);
  child.appendChild(newChild)
</script>
</body>
</html>

2.刪除已有元素

給時光以生命

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>刪除元素</title>
<style>

</style>
</head>
<body>

<ul class="example">
 <li class="child">Coffee</li>
 <li class="child">Tea</li>
 <li class="child">Coffee</li>
 <li class="child">Tea</li>
</ul>

<script>
var parent = document.querySelectorAll(".example")[0];
var child = document.querySelectorAll(".child")[2];
  document.writeln(child.innerHTML)
  parent.removeChild(child);  //第二種方法此行替換:child.parentNode.removeChild(child);
</script>
</body>
</html>

總結

以上所述是小編給大家介紹的原生JS實現(xiàn)動態(tài)添加新元素、刪除元素方法使用指南,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

您可能感興趣的文章:

js圖片延遲技術一般的思路與示例
現(xiàn)將img元素對應的src路徑設置為背景圖片，而該img所對應的url路徑存放在一個自設的屬性中
2014-03-03
微信小程序實現(xiàn)tab頁面切換效果
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)tab頁面切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-08-08
索趣科技的答案
索趣科技的答案...
2007-02-02
JS實現(xiàn)字符串翻轉的方法分析
這篇文章主要介紹了JS實現(xiàn)字符串翻轉的方法,結合實例形式分析了javascript字符串使用reverse方法、字符串遍歷方法以及針對輸入字符串的遍歷、逆序輸出等方法實現(xiàn)字符串反轉相關操作技巧,需要的朋友可以參考下
2018-08-08
微信小程序實現(xiàn)日期格式化和倒計時
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)日期格式化和倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-06-06
js代碼實現(xiàn)點擊按鈕出現(xiàn)60秒倒計時
這篇文章主要為大家詳細介紹了js代碼實現(xiàn)點擊按鈕出現(xiàn)60秒倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2015-12-12
微信小程序通過點擊事件跨頁面?zhèn)鲄⒓癲ata-方法傳參（data-）的示例詳解
在?vue?中，我們可以直接在點擊事件中放入傳遞的參數進行傳參；然而微信小程序中并不適用這樣的寫法，但是微信小程序可以通過自定義屬性從而綁定參數使用，這篇文章主要介紹了微信小程序通過點擊事件跨頁面?zhèn)鲄⒁约癲ata-方法傳參（data-）,需要的朋友可以參考下
2023-12-12
js簡單正則驗證漢字英文及下劃線的方法
這篇文章主要介紹了js簡單正則驗證漢字英文及下劃線的方法,結合完整實例形式分析了javascript針對中英文字母與下劃線的正則驗證方法,需要的朋友可以參考下
2016-11-11
JavaScript的DOM與BOM的區(qū)別與用法詳解
這篇文章主要為大家詳細介紹了JavaScript的DOM與BOM的區(qū)別與用法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-03-03
js實現(xiàn)帶翻轉動畫圖片時鐘
這篇文章主要為大家詳細介紹了js實現(xiàn)帶翻轉動畫的圖片時鐘，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04