`
shirlly
  • 浏览: 1647081 次
  • 性别: Icon_minigender_2
  • 来自: 福州
社区版块
存档分类
最新评论

insertAdjacentElement方法

360 
阅读更多
语法:
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> 
var i_nowheight=250; 
function rdl_doApply(e){ 
with (document.all("oSelect1")) var sParam1=options[selectedIndex].value; 
with (document.all("oSelect2")) var sParam2=options[selectedIndex].value; 
var oNewNode=document.createElement(sParam1); 
oList.insertAdjacentElement(sParam2,oNewNode); 
oNewNode.innerText=sParam2 
i_nowheight+=30; 
window.resizeTo(360,i_nowheight); 
} 
</script> 


<div id=oCode> 
<ul id=oList> 
<li>列表项目1 
<li>列表项目2 
</ul> 
</div> 
<table height=56><tr> 
<td><select style="width:100px;" id=oSelect1> 
<option value="button" selected>button</option> 
<option value="b">b</option> 
</select></td> 
<td><select style="width:100px;" id=oSelect2> 
<option value="beforeBegin" selected>beforeBegin</option> 
<option value="afterBegin">afterBegin</option> 
<option value="beforeEnd">beforeEnd</option> 
<option value="afterEnd">afterEnd</option> 
</select></td> 
<td><input type=button value=" 插入 " onclick="rdl_doApply()"></td> 
</tr></table>


分享到:
评论

相关推荐

    innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别

    类似的像 insertAdjacentElement , insertAdjacentElement , insertAdjacentHTML , insertAdjacentText 等。如果需要使用这些非标准的方法,或者已有的代码大量使用了这些方法的话,就必须为其他浏览器提供...

    交换两个div的位置

    - **`insertAdjacentElement()` 方法**:这是一个非标准的方法,用于在指定位置插入一个元素节点。语法如下: ```javascript element.insertAdjacentElement(position, node); ``` - `position` 参数可以是 `...

    js自动校验之动态生成错误提示信息节点(复习下如何操作dom节点)

    `insertAdjacentElement()`方法特别有用,因为它可以控制新元素是在目标元素之前还是之后插入,或者作为其前/后内联内容。 对于自动校验,我们需要监听用户的输入事件,如`input`或`blur`。在事件处理函数中,执行...

    自己写的js验证模版

    这个模板利用了`insertAdjacentElement()`方法,这是一个非常实用的DOM操作函数,用于在指定元素的特定位置插入新的节点。 `insertAdjacentElement()`方法有四个参数形式:`"beforebegin"`、`"afterbegin"`、`...

    input file的默认value清空与赋值方法

    本文将介绍三种不同的方法来实现这一目标,分别称为“李代桃僵”、“暗渡陈仓”和“声东击西”。 ### 清除大法1:李代桃僵 这种方法主要是通过JavaScript来替换HTML中的`&lt;input type="file"&gt;`元素,以达到清空其...

    js节点操作

    - **插入相邻元素**:`insertAdjacentElement`方法(对应提供的压缩文件中的`insertAdjacentElement.htm`),允许我们将元素插入到目标元素的特定位置,如`beforebegin`(在目标元素之前)、`afterbegin`(在目标...

    window.onload

    这个方法在动态添加DOM元素时非常有用,特别是在不支持 `Element.insertAdjacentElement()` 的旧浏览器上。 ##### 3.2 实现方式 ```javascript function insertAfter(newElement, targetElement) { var parent = ...

    jquery 追加元素append、prepend、before、after用法与区别分析

    示例代码中,`_insert()`函数展示了如何在DOM操作中使用`insertAdjacentHTML()`、`insertAdjacentText()`和`insertAdjacentElement()`等原生JavaScript方法。`append()`、`prepend()`、`before()`和`after()`等...

    javascript 获取图像信息

    `attachEvent()`方法用于向元素添加事件处理程序。在本例中,为`&lt;img&gt;`元素添加了`onreadystatechange`和`onerror`事件处理程序。 ```javascript img.attachEvent("onreadystatechange", orsc); img.attachEvent("on...

    引用 js在IE与FF之间的区别详细解析

    Firefox使用insertAdjacentElement,而IE则使用insertAdjacentHTML。 当我们在JavaScript中使用HTML元素创建或操作时,Firefox不支持通过createElement直接创建包含HTML代码的元素,必须通过document.write或者创建...

    js动态添加行

    可以使用`appendChild()`,`insertBefore()`或`insertAdjacentElement()`等方法。例如,要将新行添加到表格的最后,可以这样做: ```javascript let tableBody = document.querySelector('table tbody'); tableBody...

    IE与FireFox的JavaScript兼容问题解决办法

    第三,关于在指定位置插入HTML元素的方法,在IE中使用`insertAdjacentElement`方法是可行的,而在FireFox中则不行,因为FireFox浏览器中没有该方法的定义。为了解决这个问题,我们需要自行定义这个方法,通过扩展`...

    js实现动态UI的布局

    接下来,动态添加元素到这个网格中,可以使用`appendChild()`或`insertAdjacentElement()`方法。同时,每个元素的`grid-column`和`grid-row`属性也需要根据它们在网格中的位置进行设置: ```javascript function ...

    打印自动分页.zip

    element.insertAdjacentElement('afterend', clone); } }); } window.onload = function() { addPageBreaks(); }; ``` 在这个例子中,`addPageBreaks`函数遍历所有需要自动分页的元素,如果它们的高度超过一页...

    总结AJAX相关JS代码片段和浏览器模型

    - `insertAdjacentElement`,`insertAdjacentHTML`,`insertAdjacentText`:在指定位置插入元素、HTML或文本。 - `setAttribute`:设置元素的属性值。 - `removeChild`:删除子节点。 掌握这些基本操作后,开发者...

    yandex-direct-extender:添加一些按钮以改善用户界面

    例如,开发者可能使用`querySelector`或`querySelectorAll`来找到页面上的特定元素,然后通过`appendChild`或`insertAdjacentElement`方法将新按钮插入到合适的位置。 为了实现这些功能,`yandex-direct-extender`...

Global site tag (gtag.js) - Google Analytics