Home > Article > Web Front-end > JavaScript dynamically changes HTML page elements such as adding or removing

JavaScript dynamically changes HTML page elements such as adding or removing

不言Original: 2018-05-07 16:06:311789browse

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>

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JS pop-up window code collectionNext article：JS pop-up window code collection

See more

JavaScript dynamically changes HTML page elements such as adding or removing

Related articles