Detailed explanation of how JavaScript adds and deletes elements to html-JS Tutorial-php.cn

Detailed explanation of how JavaScript adds and deletes elements to html

伊谢尔伦

Release： 2017-07-18 15:17:18

Original

1991 people have browsed it

Dynamicly change elements in HTML through JavaScript

Add elements to HTML

First you need to create a tag, and then add it to the Add the corresponding content to the tag, and then add the created tag to the corresponding location.

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

Copy after login

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

Copy after login

The above is the detailed content of Detailed explanation of how JavaScript adds and deletes elements to html. For more information, please follow other related articles on the PHP Chinese website!