【JavaScript】添加DOM节点

HTML DOM树

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被构造为对象的树。通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。

查找节点

  1. 通过 id 查找 HTML 元素
	var x=document.getElementById("dv");
  1. 通过标签名查找 HTML 元素
	var y=document.getElementsByTagName("p")[i];

添加节点

1. 创建节点

1>元素节点:var node =document.createElement(“标签名”);

2>文本节点:

	Var textNode=document.createTextNode("文本内容");
	节点.innerHtML="文本内容";//可以识别html
	节点.innerText="文本内容";//非标准,有些浏览器无法识别

3>属性节点:

节点.setAttribute(“属性名”,“属性值”);

1.这是标准的方法,符合xml规范,可以添加任意的属性;
2.节点.属性名=“属性值”,例如aNode.jk=“jk”;//部分浏览器时可以使用

2. 追加节点

a. 追加到尾部:父节点.appendChild(子节点);

b. 插入到中间(插入到某一个元素的前面):父节点.insertBefore(新元素,旧元素);

demo

<head>
<script type="text/javascript">
	var J = function(id){
		return document.getElementById(id);
	};
	onload = function(){
		var ul=J("ul");
		var li=J("li");
		//创建li标签
		var newLi=document.createElement("li");
		//添加文本内容
		newLi.innerHTML="新的测试数据";
		
		//插入
		ul.insertBefore(newLi,li);
	};
script>
head>
<body id="bd">
<ul id="ul">
	<li>测试数据111li>
	<li id="li">测试数据222li>
	<li>测试数据333li>
ul>
body>

删除节点

a.父节点.removeChild(子节点) //一般不直接删除,而是隐藏节点

b.节点.style.display=“none” //隐藏节点

你可能感兴趣的:(js)