JavaScript dynamically changes HTML page elements such as adding or removing-JS Tutorial-php.cn

JavaScript dynamically changes HTML page elements such as adding or removing

不言

Release： 2018-05-07 16:06:31

Original

1807 people have browsed it

This article mainly introduces JavaScript to dynamically change HTML page elements such as adding or deleting. It has a certain reference value. Now I share it with you. Friends in need can refer to it.

HTML page elements can be passed through js changes dynamically, for example, you can add elements to HTML or delete an element. The following is the sample code. Friends who are interested should not miss it

You can dynamically change elements in HTML through JavaScript

Add elements to HTML

First you need to create a tag, then 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

Related recommendations:

How to understand and use JavaScript timing events

javaScript dynamically adds Li elements

Javascript method example summary of dynamically creating html tags

The above is the detailed content of JavaScript dynamically changes HTML page elements such as adding or removing. For more information, please follow other related articles on the PHP Chinese website!