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

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

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

1. 添加新元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>動(dòng)態(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.刪除已有元素

給時(shí)光以生命

<!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>

總結(jié)

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

您可能感興趣的文章:

相關(guān)文章

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