长相思
2014-11-02  

javaScript 基础 HTML DOM 三 节点

javascript 可以在HTML DOM 中添加新元素.

1、在添加新元素之前,我们需要先创建一个新节点,然后在创建后的新节点中添加元素。

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<div id="div1">

<p id="p1Name">喵~</p>

<p id="p2Name">嗷呜~</p>

<script>

//创建一个值为p的元素(节点)。

var newElement= document.createElement("p");

//创捷一个文本节点

var newPara=document.createTextNode("新文本节点");

//将文本节点添加到p元素中

newElement.appendChild(newPara);

//获取div元素

var fatherEle=document.getElementById("div1");

/*将p元素添加到元素div1中。只有将新建的元素添加到已有的元素中才可以被显示。*/

fatherEle.appendChild("newElement");

</script>

</div>

</div>

</body>

</html>

2、删除已有的元素

1)、我们想要删除已有的元素时,必须找到其父元素。这样DOM才能判断想要删除的元素的位置。

以上一段代码为例子

var parent=document.getElementById("div1");

var child=document.getElementById("p1");

parent.remove(child);

/*当不想获取父节点时,可以下列代码删除子节点。但是一个子节点有多个父节点,DOM只执行所搜索到的第一个父节点里的子节点进行处理*/

var child=document.getElementById("p1"); 

child.parentNode.removeChild(child);


评论
©长相思 | Powered by LOFTER