元素节点操作的方法
createElement()
【格式】document.createElement(标签名);
appendChild()
【格式】parent.appendChild(newNode)
【功能】将newNode插入到parent子节点的末尾
createTextNode()
【格式】document.createTextNode(文本)
【功能】创建一个文本节点
| 方法 | 说明 |
|---|---|
| write() | 这个方法可以把任意字符串插入到文档中 |
| createElement() | 创建一个元素节点 |
| appendChild() | 将新节点追加到子节点列表的末尾 |
| createTextNode() | 创建一个文本节点 |
| insertBefore() | 将新节点插入到前面 |
| repalceChild() | 将新节点替换旧节点 |
| cloneNode() | 复制节点 |
| removeChild() | 移除节点 |
代码如下：
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/**
* createElement()
* 【格式】document.createElement(标签名);
*
* appendChild()
* 【格式】parent.appendChild(newNode)
* 【功能】将newNode插入到parent子节点的末尾
*
* createTextNode()
* 【格式】document.createTextNode(文本)
* 【功能】创建一个文本节点
*/
window.onload = function(){
var oBtn = document.getElementById("btn");
var oDiv = document.getElementById("div1");
oBtn.onclick = function(){
var node = document.createElement("span");
var oText = document.createTextNode("你好");
node.appendChild(oText);
oDiv.appendChild(node);
//或者调用createElementWidthTxt函数
/* var node = createElementWidthTxt("span","你好");
oDiv.appendChild(node); */
}
}
function createElementWidthTxt(tagName,txt){
var node = document.createElement(tagName);
var oText = document.createTextNode(txt);
node.appendChild(oText);
return node;
}
</script>
</head>
<body>
<div id="div1">
<p>p</p>
<em>斜体</em>
</div>
<button id="btn">按钮</button>
</body>
insertBefore()
【格式】父节点.insertBefore(插入的节点,插入到某个节点之前)
【功能】将插入的节点插入到某个节点之前
代码如下：
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
/**
* insertBefore()
* 【格式】父节点.insertBefore(插入的节点,插入到某个节点之前)
* 【功能】将插入的节点插入到某个节点之前
*/
window.onload = function(){
/**
* 创建一个strong节点，将这个节点插入到span节点之前
*/
//创建一个strong节点
var node = createElementWidthTxt("strong","你好"); //创建一个strong节点
var oSpan = document.getElementsByTagName("span")[0];
//进行插入，调用insertBefore函数
oSpan.parentNode.insertBefore(node,oSpan);
//创建一个strong节点，将这个节点插入到span节点之后，调用insertAfter函数
insertAfter(node,oSpan);
}
function insertAfter(newNode,oldNode){
//判断oldNode是否是最后一个节点
var parent = oldNode.parentNode;
if(parent == parent.lastChild){
//最后一个节点，直接插入到节点末尾
parent.appendChild(newNode);
}else{
//插入到这个节点的下一个节点之前
parent.insertBefore(newNode,oldNode.nextSibling);
}
}
function createElementWidthTxt(tagName,txt){
var node = document.createElement(tagName);
var oText = document.createTextNode(txt);
node.appendChild(oText);
return node;
}
</script>
</head>
<body>
<div id="div1">
<p></p>
<em></em>
<span></span>
</div>
</body>