如何使用原生JS實現(xiàn)動態(tài)添加新元素、刪除元素-創(chuàng)新互聯(lián)

這篇文章主要介紹了如何使用原生JS實現(xiàn)動態(tài)添加新元素、刪除元素，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務，包含不限于網(wǎng)站設計、網(wǎng)站建設、德保網(wǎng)絡推廣、微信小程序開發(fā)、德保網(wǎng)絡營銷、德保企業(yè)策劃、德保品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們大的嘉獎；創(chuàng)新互聯(lián)為所有大學生創(chuàng)業(yè)者提供德保建站搭建服務，24小時服務熱線：18980820575，官方網(wǎng)址：muchs.cn

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)添加新元素、刪除元素”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關知識等著你來學習!

當前標題：如何使用原生JS實現(xiàn)動態(tài)添加新元素、刪除元素-創(chuàng)新互聯(lián)
URL鏈接：http://muchs.cn/article42/deijhc.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供服務器托管、網(wǎng)站收錄、靜態(tài)網(wǎng)站、域名注冊、微信公眾號、搜索引擎優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設