当前位置:首页 > 开发 > Web前端 > HTML > 正文

HTML元素操作

发表于: 2013-09-05   作者:wjiaoling136   来源:转载   浏览:
摘要: 刚学的JS对HTML元素的操作,给往后留个参考,写个东西记录下。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&q

刚学的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元素操作

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
jQuery 提供下面方法来控制HTML元素的大小: width() height() innerWidth() innerHeight() outerWi
jQuery 提供下面方法来控制HTML元素的大小: width() height() innerWidth() innerHeight() outerWi
HTML 文档由 HTML 元素定义。 HTML 元素 *开始标签常被称为起始标签(opening tag),结束标签常称
HTML 文档由 HTML 元素定义。 HTML 元素 *开始标签常被称为起始标签(opening tag),结束标签常称
注意: 1.因为震动的元素位于 fixed/absolute,它们应该被包装在一个 fixed/absolute 的元素里面 2.
 HTML(Hypertext Markup Language)超文本标记语言,常用于描述网页文档。我们比较常用的www万
HTML简介: HTML英文名:Hypertext Markup Language 中文名: 超文本链接标示语言 (“超文本”就是
ASP.NET MVC Preview 5 演示Demo #7 实现JQuery表单数据验证及JQuery操作Html元素 ASP.NET MVC Prev
1、块状元素一般比较霸道,它排斥与其他元素位于同一行内,比如div,并且width与height对它起作用。
转自:http://gkecenter.blog.163.com/blog/static/181380305201291745234195/ 一.两种类型 HTML中
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号