刚学的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>
相关推荐
总的来说，理解和熟练掌握HTML DOM的元素操作是成为优秀Web前端开发者的基础。通过学习本教程，你将能够更加自如地使用JavaScript动态地改变网页内容，实现丰富的交互效果。这不仅提升了用户体验，也为网页应用的...
每个元素卡片可能用`<div>`元素表示，并通过`id`或`class`属性进行标识，以便JavaScript操作。 其次，JavaScript是实现周期表动态交互的关键。它可以用来响应用户的点击、鼠标悬停等事件，展示元素的详细信息，如...
本资源"HTML常用表单元素操作源码"聚焦于如何通过HTML、JavaScript、JQuery来操作这些元素，以实现更丰富的用户体验。 1. **HTML表单元素**： - `input`：输入框，可以是文本、数字、日期等多种类型，通过`type`...
在JavaScript编程中，动态插入HTML元素是一项常见的任务，特别是在构建交互式网页时。这项技术允许我们在用户的操作或者程序运行过程中，根据需要向页面添加、修改或删除DOM（文档对象模型）元素，从而实现动态更新...
5. 元素操作：包括获取元素对象、添加元素、删除元素、修改元素属性等。 技术要点： * 使用 `findObj` 函数获取元素对象，解决浏览器兼容性问题。 * 使用 `insertRow` 方法添加新行，并设置行的 ID 和内容。 * ...
5. **HTML元素操作**：如何创建、查找、修改和删除HTML元素。 6. **表单控制**：针对HTML表单的处理，包括验证、提交等操作。 7. **Ajax技术**：DHTML中常使用的异步数据交换技术，用于实现无刷新的数据更新。 8. **...
操作元素内容.html
在HTML页面中，除了系统支持的HTML元素外，是否可以建立自定义的HTML元素呢？答案是可以的。 自定义的HTML元素与系统自身的HTML元素地位相同，都可以用document.getElementById来获得，区别在于，自定义的HTML元素...
HTML拖拽功能是一种交互式设计，它允许用户通过鼠标或其他输入设备直接在页面上操作元素，如改变元素的长度。这种技术主要基于HTML5的Drag and Drop API，它为Web开发者提供了一种方便的方式来实现拖放操作，增强了...
综上所述，易语言html元素过滤和XMLhttp读文件技术涉及到了文件操作、网络通信、字符串处理、正则表达式和HTML解析等多个方面，是易语言编程中常见的实用技能。通过理解和掌握这些知识点，开发者可以在易语言环境中...
探析在jQuery框架下操作HTML DOM元素 一、HTML DOM简介 HTML DOM（Document Object Model）是HTML文档对象模型的缩写，定义了访问和操作HTML文档的标准方法。它将网页中的各个元素都看作一个个对象，从而使网页中...
在处理用户操作反馈时，HTML可以用来构建动态和交互性的界面元素。例如，一个简单的"操作成功"提示框可能包含以下HTML代码： ```html 操作成功！ ``` 这里的`<div>`元素作为容器，`<p>`元素则用于显示具体的...
2. **HTML元素操作**：能够创建、修改或删除DOM元素，例如添加类名、改变属性值或替换内容。 3. **CSS操作**：可以方便地更改元素的样式，包括颜色、尺寸、布局等。 4. **HTML事件函数**：绑定各种DOM事件，如点击...
在C#中，处理HTML通常需要解析HTML字符串或文件，查找并操作特定元素。而`HTMLHelper.cs`这个类文件，就是为了解决这个问题，它提供了封装好的方法，使得这些操作变得简单易行。 该类可能包含以下功能： 1. **获取...
《jQuery元素操作详解》 在Web开发中，jQuery库以其简洁、高效的API赢得了广大开发者喜爱，其中元素操作是jQuery的核心功能之一。这篇博客将深入探讨jQuery如何进行元素选择、操作和增强DOM（文档对象模型）的功能...
- HTML元素操作: 改变元素的内容、属性、样式等。 - CSS操作: 动态更改元素的样式。 - HTML事件函数: 处理用户的交互行为（如点击、鼠标移动等）。 - JavaScript特效和动画: 创建复杂的视觉效果。 - HTML DOM...
2. HTML元素操作：一旦选取了元素，就可以利用jQuery提供的方法来添加、移除或修改元素。例如，可以使用jQuery来改变元素的类名、内容和属性等。 3. CSS操作：jQuery允许开发者以一种直观和简洁的方式动态地改变CSS...