JavaScript dynamically changes HTML page elements such as adding or deleting

Home

Web Front-end

JS Tutorial

JavaScript dynamically changes HTML page elements such as adding or deleting_javascript tips

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:40 PM

dynamic changepage elements

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

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

JavaScript 如何实现页面元素的拖动排序功能？Oct 20, 2023 pm 12:28 PM

JavaScript如何实现页面元素的拖动排序功能？在现代的Web开发中，拖动排序是一个非常常见的功能，它可以让用户通过拖动元素的方式改变它们在页面中的位置。本文将介绍如何使用JavaScript实现页面元素的拖动排序功能，并提供具体的代码示例。实现拖动排序功能的基本思路如下：首先，在HTML中创建需要拖动排序的元素，例如一组div。<

学会固定定位：让页面元素随滚动而动，快速入门Jan 20, 2024 am 10:29 AM

快速了解固定定位方式：让你的页面元素随着滚动而动，需要具体代码示例在网页设计中，有时候我们希望某些页面元素在滚动时保持固定的位置，不随滚动而移动。这种效果可以通过CSS的固定定位（position:fixed）来实现。本文将介绍固定定位的基本原理以及具体的代码示例。固定定位的原理很简单，通过将元素的定位属性设置为fixed，可以将元素相对于视口固定在某个位

利用jQuery实现网页样式的动态调整Feb 25, 2024 pm 03:42 PM

使用jQuery实现网页样式风格的动态改变在网页设计中，样式是非常重要的一部分，可以通过改变样式来增强用户体验和页面设计效果。而使用jQuery这样的JavaScript库可以帮助我们实现网页样式风格的动态改变，从而让页面更加生动有趣。本文将介绍如何使用jQuery实现网页样式的动态改变，并提供具体的代码示例。首先，我们需要在网页中引入jQuery库，可以通

利用fit-content实现页面元素的水平居中布局Sep 09, 2023 pm 02:07 PM

利用fit-content实现页面元素的水平居中布局在网页设计中，页面元素的布局是非常重要的一环。而实现页面元素的水平居中布局是一个常见的需求。为了解决这个问题，我们可以使用CSS的fit-content属性来实现。fit-content是CSS中的一个属性，它可以根据元素的内容来动态计算元素的宽度或高度。通过将元素的宽度或高度设置为fit-content，

掌握绝对定位的常见属性值，让你的页面元素随心摆放Jan 18, 2024 am 10:01 AM

掌握绝对定位的常见属性值，让你的页面元素随心摆放，需要具体代码示例绝对定位（absolutepositioning）是CSS中常用的定位方法之一，它允许我们将元素相对于其最近的带有定位属性的父元素进行定位。掌握绝对定位的常见属性值，我们可以轻松地控制页面元素的位置和布局。1.定位元素的基本概念在使用绝对定位之前，我们需要先了解一些基本概念。父元素指的是具

PHP和WebDriver扩展：如何实现页面元素的检测和断言Jul 07, 2023 am 09:05 AM

PHP和WebDriver扩展：如何实现页面元素的检测和断言导语：随着Web应用程序的增多，自动化测试变得越来越重要。在测试过程中，我们需要验证页面上的元素是否存在，以及它们的状态是否符合预期。本文将介绍如何使用PHP和WebDriver扩展来实现页面元素的检测和断言。一、准备工作在开始之前，我们需要确保以下环境已经配置好：安装PHP和Composer安装W

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

如何使用fit-content技术让页面元素水平居中在网页设计与开发中，水平居中是一个常见而重要的布局技术。在过去，我们经常使用margin:0auto来实现水平居中。然而，随着CSS中新的布局属性不断出现，我们现在有了更多的选择。其中一个强大的技术是使用fit-content属性。它可以根据元素的实际内容大小自动计算出一个适合的宽度，从而实现水平居中。

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

PHP中页面元素有标题、段落、超链接、图像、表格、表单、按钮、列表、文本框、下拉菜单、复选框、单选按钮、文本区域和分页等。详细介绍：1、标题用于定义网页的主要内容，可以使用HTML的<h1>到<h6>标签来创建不同级别的标题；2、段落用于组织和展示文本内容，可以使用HTML的<p>标签来创建段落；3、超链接用于在不同页面之间进行导航，可以使用HTML的<a>标签创建超链接等等。

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

4 weeks agoByDDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

4 weeks agoByDDD

Two Point Museum: All Exhibits And Where To Find Them

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

SublimeText3 Chinese version

Chinese version, very easy to use

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software