JavaScript は、追加や削除など、HTML ページ要素を動的に変更します

ホームページ

ウェブフロントエンド

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库，可以通

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

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

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

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

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