首頁 web前端 js教程 JavaScript動態改變HTML頁面元素例如新增或刪除_javascript技巧

JavaScript動態改變HTML頁面元素例如新增或刪除_javascript技巧

May 16, 2016 pm 04:40 PM
動態改變 頁面元素

可以透過JavaScript動態的改變HTML中的元素

在HTML中加入元素

首先需要建立一個標籤,然後在該標籤中新增對應的內容,然後將建立好的標籤新增到對應的位置。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>测试文档</title> 
<script type="text/javascript"> 
function add(){ 
var element = document.createElement("p"); 
var node = document.createTextNode("添加新段落"); 
element.appendChild(node); 
x = document.getElementById("demo"); 
x.appendChild(element); 
} 
</script> 
</head> 
<body> 
<div id="demo"> 
<p>这是第一段</p> 
</div> 
<input type="button" value="按钮" onclick="add()" /> 
</body> 
</html>
登入後複製

刪除HTML中的某個元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>测试文档</title> 
<script type="text/javascript"> 
function deleteE(){ 
var father = document.getElementById("demo"); 
var child = document.getElementById("p1"); 
father.removeChild(child); 
} 
</script> 
</head> 
<body> 
<div id="demo"> 
<p id="p1">这是第一段</p> 
<p id="p2">这是第二段</p> 
</div> 
<input type="button" value="删除" onclick="deleteE()" /> 
</body> 
</html>
登入後複製
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

JavaScript 如何實作頁面元素的拖曳排序功能? JavaScript 如何實作頁面元素的拖曳排序功能? Oct 20, 2023 pm 12:28 PM

JavaScript 如何實作頁面元素的拖曳排序功能?

學會固定定位:讓頁面元素隨滾動而動,快速入門 學會固定定位:讓頁面元素隨滾動而動,快速入門 Jan 20, 2024 am 10:29 AM

學會固定定位:讓頁面元素隨滾動而動,快速入門

利用jQuery實現網頁樣式的動態調整 利用jQuery實現網頁樣式的動態調整 Feb 25, 2024 pm 03:42 PM

利用jQuery實現網頁樣式的動態調整

利用fit-content實現頁面元素的水平居中佈局 利用fit-content實現頁面元素的水平居中佈局 Sep 09, 2023 pm 02:07 PM

利用fit-content實現頁面元素的水平居中佈局

PHP和WebDriver擴充:如何實作頁面元素的偵測和斷言 PHP和WebDriver擴充:如何實作頁面元素的偵測和斷言 Jul 07, 2023 am 09:05 AM

PHP和WebDriver擴充:如何實作頁面元素的偵測和斷言

掌握絕對定位的共同屬性值,讓你的頁面元素隨心所欲 掌握絕對定位的共同屬性值,讓你的頁面元素隨心所欲 Jan 18, 2024 am 10:01 AM

掌握絕對定位的共同屬性值,讓你的頁面元素隨心所欲

如何使用fit-content技術讓頁面元素水平居中 如何使用fit-content技術讓頁面元素水平居中 Sep 08, 2023 pm 12:55 PM

如何使用fit-content技術讓頁面元素水平居中

PHP中頁面元素有哪些 PHP中頁面元素有哪些 Aug 23, 2023 pm 01:07 PM

PHP中頁面元素有哪些

See all articles