suchen

Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erklärung, wie JavaScript Elemente zu HTML hinzufügt und löscht

Detaillierte Erklärung, wie JavaScript Elemente zu HTML hinzufügt und löscht

伊谢尔伦
伊谢尔伦Original
2017-07-18 15:17:182009Durchsuche

Elemente in HTML durch JavaScript dynamisch ändern

Elemente zu HTML hinzufügen

Zuerst müssen Sie ein Tag erstellen und es dann hinzufügen zum Fügen Sie den entsprechenden Inhalt zum Tag hinzu und fügen Sie dann das erstellte Tag an der entsprechenden Stelle hinzu. 


<!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> 
<p id="demo"> 
<p>这是第一段</p> 
</p> 
<input type="button" value="按钮" onclick="add()" /> 
</body> 
</html>

Ein Element in HTML löschen


<!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> 
<p id="demo"> 
<p id="p1">这是第一段</p> 
<p id="p2">这是第二段</p> 
</p> 
<input type="button" value="删除" onclick="deleteE()" /> 
</body> 
</html>

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung, wie JavaScript Elemente zu HTML hinzufügt und löscht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie implementiert man die Datenübertragung zwischen mehreren Formularen in Javascript?Nächster Artikel：Wie implementiert man die Datenübertragung zwischen mehreren Formularen in Javascript?

In Verbindung stehende Artikel

Mehr sehen