Web Front-end
JS Tutorial
JavaScript dynamically changes HTML page elements such as adding or deleting_javascript tips
JavaScript dynamically changes HTML page elements such as adding or deleting_javascript tips
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>
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
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How does JavaScript implement the drag-and-sort function of page elements?
Oct 20, 2023 pm 12:28 PM
How does JavaScript implement the drag-and-sort function of page elements? Drag sorting is a very common feature in modern web development, which allows users to change the position of elements on the page by dragging them. This article will introduce how to use JavaScript to implement the drag-and-sort function of page elements and provide specific code examples. The basic idea of implementing the drag sorting function is as follows: First, create elements that require drag sorting in HTML, such as a set of divs. <
Learn to fix positioning: let page elements move with scrolling and get started quickly
Jan 20, 2024 am 10:29 AM
Quickly understand the fixed positioning method: making your page elements move with scrolling requires specific code examples. In web design, sometimes we want certain page elements to maintain a fixed position when scrolling and not move with scrolling. This effect can be achieved through CSS fixed positioning (position:fixed). This article will introduce the basic principles of fixed positioning and specific code examples. The principle of fixed positioning is very simple. By setting the positioning attribute of the element to fixed, the element can be fixed at a certain position relative to the viewport.
Use jQuery to dynamically adjust web page styles
Feb 25, 2024 pm 03:42 PM
Use jQuery to dynamically change web page styles. In web design, style is a very important part. You can enhance user experience and page design effects by changing styles. Using JavaScript libraries like jQuery can help us dynamically change the style of web pages, making the pages more lively and interesting. This article will introduce how to use jQuery to dynamically change web page styles and provide specific code examples. First, we need to introduce the jQuery library into the web page, which can be
Use fit-content to achieve horizontally centered layout of page elements
Sep 09, 2023 pm 02:07 PM
Use fit-content to achieve a horizontally centered layout of page elements. In web design, the layout of page elements is a very important part. Implementing a horizontally centered layout of page elements is a common requirement. To solve this problem, we can use the CSS fit-content property. fit-content is a property in CSS that dynamically calculates the width or height of an element based on its content. By setting the element's width or height to fit-content,
Master the common attribute values of absolute positioning and let your page elements be placed as you like
Jan 18, 2024 am 10:01 AM
Master the common attribute values of absolute positioning, so that your page elements can be placed as you like. Specific code examples are required. Absolute positioning (absolutepositioning) is one of the commonly used positioning methods in CSS. It allows us to position elements relative to their nearest positioning attributes. The parent element is positioned. By mastering the common attribute values of absolute positioning, we can easily control the position and layout of page elements. 1. Basic concepts of positioning elements Before using absolute positioning, we need to understand some basic concepts. The parent element refers to the
PHP and WebDriver Extensions: How to implement detection and assertion of page elements
Jul 07, 2023 am 09:05 AM
PHP and WebDriver extension: How to implement detection and assertion of page elements Introduction: With the increase of web applications, automated testing has become more and more important. During testing, we need to verify that elements on the page exist and that their state is as expected. This article will introduce how to use PHP and WebDriver extensions to implement detection and assertion of page elements. 1. Preparation Before starting, we need to ensure that the following environment has been configured: Install PHP and Composer Install W
What are the page elements in PHP?
Aug 23, 2023 pm 01:07 PM
Page elements in PHP include titles, paragraphs, hyperlinks, images, tables, forms, buttons, lists, text boxes, drop-down menus, check boxes, radio buttons, text areas, and paging. Detailed introduction: 1. The title is used to define the main content of the web page. You can use HTML's <h1> to <h6> tags to create different levels of titles; 2. Paragraphs are used to organize and display text content. You can use HTML's <p > tag to create paragraphs; 3. Hyperlinks are used to navigate between different pages. You can use HTML's <a> tag to create hyperlinks, etc.
How to use fit-content technology to center page elements horizontally
Sep 08, 2023 pm 12:55 PM
How to use fit-content technology to center page elements horizontally In web design and development, horizontal centering is a common and important layout technology. In the past, we often used margin:0auto to achieve horizontal centering. However, as new layout properties in CSS continue to appear, we now have more choices. One of the powerful techniques is to use the fit-content attribute. It can automatically calculate a suitable width based on the actual content size of the element to achieve horizontal centering.
