您的位置：首页 > Web前端 > JavaScript

有关javascript:insertAdjacentHTML和javascript:insertAdjacentElement的用法

2010-05-18 23:45 363 查看

添加HTML内容与文本内容以前用的是innerHTML与innerText方法，最近发现还有insertAdjacentHTML和insertAdjacentText方法，这两个方法更灵活，可以在指定的地方插入html内容和文本内容。 insertAdjace
添加HTML内容与文本内容以前用的是innerHTML与innerText方法，最近发现还有insertAdjacentHTML和insertAdjacentText方法，这两个方法更灵活，可以在指定的地方插入html内容和文本内容。
insertAdjacentHTML方法：在指定的地方插入html标签语句

原型：insertAdajcentHTML(swhere,stext)

参数：

swhere: 指定插入html标签语句的地方，有四种值可用：

1. beforeBegin: 插入到标签开始前

2. afterBegin:插入到标签开始标记之后

3. beforeEnd:插入到标签结束标记前

4. afterEnd:插入到标签结束标记后

stext：要插入的内容

DEOM:

<!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=gb2312" />
<title>无标题文档</title>
<mce:script language="jscript"></mce:script>
</head>
<body onload="addsome()">
<div id="paral" style="fontsize:6;color='#ff00ff'" mce_style="fontsize:6;color='#ff00ff'">原来的内容</div><hr>
</body>
</html>

insertAdjacentElement
　　语法：
　　oElement = object . insertAdjacentElement ( sWhere , oElement )
　　参数：
　　oElement :　必选项。对象(Element)。要插入到 object 邻近的对象。
　　sWhere :　必选项。字符串(String)。beforeBegin | afterBegin | beforeEnd | afterEnd beforeBegin :　将 oElement 插到 object 的开始标签之前。
　　afterBegin :　将 oElement 插到 object 的开始标签之后。但是在 object 的所有原有内容之前。
　　beforeEnd :　将 oElement 插到 object 的结束标签之前。但是在 object 的所有原有内容之后。
　　afterEnd :　将 oElement 插到 object 的结束标签之后。
　　返回值：
　　oElement :　对象(Element)。返回插入的对象的引用。
　　说明：
　　将 oElement 依据 object 定位插入文档结构。
　　当文档正在载入时，不可以尝试此方法。必须在 onload 事件触发以后。
　　假如你尝试插入一个已经在文档结构中存在定位的对象，该对象将被移动到你指定的插入位置，而不会有新对象被创建。

<SCRIPT>
function fnAdd()
{
var oNewItem = document.createElement("LI");
oList.children(0).insertAdjacentElement("BeforeBegin",oNewItem);
oNewItem.innerText = "List Item 0";
}
</SCRIPT>
:
<BODY>
<OL ID = "oList">
<LI>List Item 1</LI>
<LI>List Item 2</LI>
<LI>List Item 3</LI>
</OL>
<INPUT TYPE = "button" VALUE = "Add Item" onclick="fnAdd()">
</BODY>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航