JavaScript動態改變HTML頁面元素例如新增或刪除

首頁

web前端

js教程

JavaScript動態改變HTML頁面元素例如新增或刪除_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 04:40 PM

動態改變頁面元素

可以透過JavaScript動態的改變HTML中的元素

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

刪除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>

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡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属性。它可以根据元素的实际内容大小自动计算出一个适合的宽度，从而实现水平居中。

深入探讨粘性定位的标准：如何实现页面元素的固定定位？Feb 02, 2024 pm 02:03 PM

深入探讨粘性定位的标准：如何实现页面元素的固定定位？引言：在网页设计中，粘性定位（stickypositioning）是一种非常实用的技术，可以使页面元素在滚动时保持固定位置。它能够提升用户体验，使页面更加动态且易用。本文将深入探讨粘性定位的标准和实现方法，并提供具体的代码示例。一、粘性定位的概念：粘性定位是CSS中的一种定位方式，可以让页面元素在滚动时相

See all articles