HTML元素操作

最新推荐文章于 2023-05-25 11:19:55 发布
最新推荐文章于 2023-05-25 11:19:55 发布
阅读量124 收藏
点赞数
分类专栏： JS 文章标签： createElement createTextNode appendChild insertBefore
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wjiaoling136/article/details/84476570
版权

刚学的JS对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=GBK" />
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>	
<script type="text/javascript">
	$(function(){
	/**
	//在div中添加子节点
	//为div1添加段落2,位置：最后
	var p2 = document.createElement("p"); //创建p元素节点
	p2.setAttribute("id","p2");//添加id属性
	var txNode = document.createTextNode("段落2");//创建文本节点
	p2.appendChild(txNode);//将文本节点添加到p2元素节点中

	//将p3添加到div中，作为div的最后一个子节点
	document.getElementById("div1").appendChild(p3);
	*/
	
	/*
	//为div1添加段落，位置：前面,中间
	var p0=document.createElement("p");
	var txNode0=document.createTextNode("段落0");
	p0.setAttribute("id","p0");
	p0.appendChild(txNode0);
	var p2=document.createElement("p");
	var txNode2=document.createTextNode("段落2");
	p2.setAttribute("id","p2");
	p2.appendChild(txNode2);
	//将p0添加到div的最前面，p2添加到中间
	document.getElementById("div1").insertBefore(p0,document.getElementById("p1"));//p1之前
	document.getElementById("div1").insertBefore(p2,document.getElementById("p3"));//p3之前
	*/

	/*
	//在body中添加子节点 位置：最后
	var div3 = document.createElement("div");
	div3.setAttribute("id","div3");
	var p7 = document.createElement("p");
	p7.setAttribute("id","p7");
	var txNo7=document.createTextNode("段落7");
	p7.appendChild(txNo7);
	var p8 = document.createElement("p");
	p8.setAttribute("id","p8");
	var txNo8=document.createTextNode("段落8");
	p8.appendChild(txNo8);
	div3.appendChild(p7);
	div3.appendChild(p8);
	document.body.appendChild(div3);
	*/
	/*
	//在body中添加子节点 位置：开始、中间
	var div3 = document.createElement("div");
	div3.setAttribute("id","div3");
	var p7 = document.createElement("p");
	p7.setAttribute("id","p7");
	var txNo7=document.createTextNode("段落7");
	p7.appendChild(txNo7);
	var p8 = document.createElement("p");
	p8.setAttribute("id","p8");
	var txNo8=document.createTextNode("段落8");
	p8.appendChild(txNo8);
	div3.appendChild(p7);
	div3.appendChild(p8);
	var p10=document.createElement("p");
	var txNode10=document.createTextNode("段落10");
	p10.appendChild(txNode10);

	document.body.insertBefore(p10,document.getElementById("div1"));//添加在div1之前
	document.body.insertBefore(div3,document.getElementById("div2"));//添加在div2之前
	*/

	/*
	//删除段落5:必须提供父元素
	var div2=document.getElementById("div2");
	var p5=document.getElementById("p5");
	div2.removeChild(p5);
//	p5.parentNode.removeChild(p5);
	*/

	//替换段落5：
	var reP=document.createElement("p");
	var txNodeRe=document.createTextNode("替换段落");
	reP.setAttribute("id","rep");
	reP.appendChild(txNodeRe);
	document.getElementById("div2").replaceChild(reP,document.getElementById("p5"));
	});
</script>
<style>
</style>
</head>

<body>
	<div id="div1">
		<p id="p1">段落1</p>
		<p id="p3">段落3</p>
	</div>

	<div id="div2">
		<p id="p4">段落4</p>
		<p id="p5">段落5</p>
	</div>
</body>
</html>

  

wjiaoling136
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript离别之作——HTML元素操作
m0_70273331的博客
04-28 1035
[](()一、获取操作的元素 ======================================================================== [](()🌴 document对象的方法和属性 document对象提供了一些用于查找元素的方法，利用这些方法可以根据元素的id、name和class属性以及标签名称的方式获取操作的元素。 🔺总结 除了document.getElementById()方法返回的是拥有指定id的元素外，其他方法返回的都是符合要求的一个集合。.
HTML功能元素基本操作（列表、表格、表单）
m0_65214572的博客
07-18 158
列表、表格、表单的基本操作
<div> HTML tag
学习笔记
09-23 471
可定义文档中的分区或节（division/section）。 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。 如果用 id 或 class 来标记 ，那么该标签的作用会变得更加有效。 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 固有的唯一格式表现。可以通过 的 class 或 id 应用额外的样式。 不必为每一个 ...
在js中操作html的元素
sinat_31907813的博客
09-19 1159
如何在js中找到网页中的元素: 1.获取页面中的标签元素,获取到元素后,在js中是一种元素对象, js对这种对象会提供一些操作元素的属性和方法; 2.grtElementById 表示在文档中通过元素的id属性值来获取元素,参数是字符串, 直接写值,不需要加上#号 获取到元素后,尽量保存到变量中,方便后续操作 获取元素以后,保存在变量中,就可以通过这个变量操作元素,操作元素一般分为三个方面: 元素...
1. js入门基础-html元素属性操作
雏蜂的博客
07-14 1387
简介：html 元素标签：         p(段落) 、 input(输入)、 a(链接)等属性：         &lt;input id="text1" type="text"/&gt; 对于input标签 类型为text 文本输入框，id 就是它的属性， text1 就是对应的值。操作：         读、写（修改、替换）案例：一: 弹出按钮丢应的名字&lt;html&gt; &lt;h...
JavaScript HTML DOM元素 节点操作汇总
10-16
JavaScript HTML DOM元素节点操作是网页动态交互的核心技术之一，它允许我们通过JavaScript代码来操作页面上的HTML元素。本文将深入探讨DOM中的节点操作，包括添加、删除、替换和查找节点等基本操作。 首先，理解...
js 针对html DOM元素操作等经验累积
12-12
在JavaScript（JS）中，DOM（Document Object Model）是HTML和XML文档的一种结构化表示，它允许我们通过编程方式访问和操作文档中的元素。这里提到的`$(“.scrollContainer”).children().size()`是一个jQuery方法链...
javascript HTML操作代码
10-30
本文将详细介绍 JavaScript HTML 操作代码，包括 JavaScript 操作 HTML 标签、创建 optgroup 元素、动态添加选项、删除选项等内容。 JavaScript 操作 HTML 标签 在 HTML 中，每个元素都可以通过 JavaScript 进行...
js动态生成Html元素实现Post操作（createElement）
10-23
本文将深入探讨如何利用`createElement`方法来动态创建HTML元素，并结合POST操作进行数据提交。 首先，POST操作通常用于向服务器发送数据，这些数据会附带在HTTP请求的主体部分，常用于表单提交或API调用。当需要在...
DOM对HTML元素的增删改操作
最好的一天
11-21 680
1.DOM创建节点的方法：        document.createElement(Tag)，tag是HTML元素 2.DOM复制节点的方法         节点.cloneNode(boolean,deep)，当deep=true时，表示复制当前节点以及节点呈现的内容，当deep=false时表示只复制节点 3.DOM添加、删除节点的方法 appendChild(abb)：将abb...
JavaScript随机数（random）
羊羊羊羊羊羊羊的博客
02-11 4821
Math.random() 函数返回一个浮点, 伪随机数在范围[0，1)，也就是说，从0（包括0）往上，但是不包括1（排除1），然后您可以缩放到所需的范围。实现将初始种子选择到随机数生成算法;它不能被用户选择或重置。 1、0～1的随机数？ Math.random(); 2、0～10的随机数？ Math.random()*10; 3、0～10的随机整数？ Math.floor(Math.ra...
request.setAttribute()用法
lip86的专栏
12-16 6030
request.setAttribute()用法 假设有两个jsp页面，jsp1和jsp2。 JSP1代码 String [] test=new String[2]; test[0]="1"; test[1]="2"; request.setAttribute("test",test) ; response.sendRedirect("jsp2.jsp"); JSP2代
JavaScript中对各种HTML元素属性的操作一览及代码案例
最新发布
qq_43326668的博客
05-25 2182
JavaScript提供了丰富的属性操作方法，用于操作各种HTML元素。本篇博客介绍了基本属性操作、样式属性操作、事件属性操作、属性操作方法以及针对表单元素、图片元素和链接元素的属性操作方法，并提供了相应的代码案例。JavaScript是一种广泛应用于Web开发的脚本语言，它提供了丰富的API和方法，用于对HTML元素的属性进行操作。本篇博客将一一列举JavaScript中对各种HTML元素属性的操作方法，并提供相应的代码案例，帮助读者更好地理解和应用JavaScript在Web开发中的作用。
JavaScript进阶（三）document对象及HTML元素操作
jwang的博客
11-06 7068
前言       本章将学习document对象以及其操作html元素的相关知识，本章知识尤为重要！ 方法 1.概念 严格的意义上来将，document对象是window对象的一个属性，浏览器对外提供的支持js的用来操作HTML文档的一个对象，此对象封存的HTML文档的所有信息。 2.document获取html元素对象 看过CSS入门的同学应该都还记得，CSS有专门的选择器来标识ht...
HTML 表单表格元素的详细使用以及实现方法
weixin_52446700的博客
08-18 522
1.语义化标签 1.1 语义化 根据内容的结构，选择合适的标签，便于开发者阅读和机器阅读，写出更加优雅的代码，为浏览器的爬虫和机器更好的解析。 1.2 HTML5 新增的语义化标签 header：用于定义文档或者章节的头部。 nav：用于定义导航链接部分。 footer：用于定义文档或者章节的地步。 article：用于定义文档的文章（帖子、新闻、博客） section：用于定义一个文档的章节。 aside：用于定义与当前页面文章内容无关的附属信息 address：用于地址 2.表格 2.1 涉及标签 ta
使用jQuery操作HTML元素（一）
青柠晶晶的博客
11-27 1387
一.使用jQuery获取HTML元素对应的jquery对象 在标准javascript中，可以使用document.getElementById()方法根据ID获取HTML元素对应的DOM对象。 语法：var DOM对象=document.getElementById(对象id) 然后通过DOM对象中的innerText属性可以获取和设置HTML元素的显示文本。 1.在javascript...
利用window.open实现post方式的传递参数
总有一天，你的日积月累，会成为别人的望尘莫及
10-27 8998
基本业务是这样子的：根据给定的用户名和密码，加密后生成二维码然后打印出来。看似简单的一句话，存在两个大问题： 1、打印功能时不能指定打印区域的，要打印只能打印整个页面，不可能只打印二维码所在的小片区域。那么只能重新开一个窗口，然后单独打印这一个窗口； 2、重新打开窗口时需要带参数，而且参数必须是隐藏的。window.open()默认带参数的方法是在url中直接添加参数，这样子参数信息就会暴...
掌握HTML DOM对象编程：浏览器核心与元素操作详解
6.3节讲解了基于DOM的HTML元素操作，例如： - **访问根元素**：通过document对象的rootElement属性或document.documentElement属性，可以直接访问HTML文档的根元素。 - **访问指定Id属性的元素**：利用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值