js之DOM操作（插入节点insertBefore()）

插入节点insertBefore()

insertBefore() 方法可在已有的子节点前插入一个新的子节点。

语法:

insertBefore(newnode,node);

参数:

newnode: 要插入的新节点。

node: 指定此节点前插入节点。

我们在来看看下面代码，在指定节点前插入节点。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body><ul id="test"><li>JavaScript</li><li>HTML</li>
</ul> <script type="text/javascript">var otest = document.getElementById("test");  var newnode = document.createElement("li");newnode.innerHTML = "java";otest.insertBefore(newnode,otest.childNodes[0]);</script> </body>
</html>

运行结果：

    javaJavaScriptHTML

js之DOM操作（插入节点insertBefore()）相关推荐

插入节点insertBefore()
http://www.imooc.com/code/1699 插入节点insertBefore() insertBefore() 方法可在已有的子节点前插入一个新的子节点. 语法: insertBef ...
js 原生dom 操作
一. 首先要了解什么是 DOM? DOM: 全称 Document Object Mode 文档对象模型,表示由多层节点构成的文档. document: 表示每个文档的根节点,它的唯一子结点是 htm ...
js hover 触发事件_为什么说JS的DOM操作很耗性能
想问这样的问题,其实是自己心中没有个谱,一直用 js 计算性能来衡量浏览器dom 操作性能.js性能和浏览器性能其实是两码事. 这个问题很抽象,它里面涉及挺多个小的知识点. 重申一点,js 操作 D ...
原生js循环展示dom_为什么说JS的DOM操作很耗性能
想问这样的问题,其实是自己心中没有个谱,一直用 js 计算性能来衡量浏览器dom 操作性能.js性能和浏览器性能其实是两码事. 这个问题很抽象,它里面涉及挺多个小的知识点. 重申一点,js 操作 D ...
jquery的Dom操作查找节点
1.查找元素节点使用之前的jquery的各种选择器按照语法:"$(选择器)"来定位到文档中的元素,我们定位后得到的是一个jquery对象.我们可以使用juery提供的方法来操作我 ...
JS的DOM操作1--获取元素与修改元素(附带动图案例)
1.获取元素与修改元素 https://blog.csdn.net/TroyeSivanlp/article/details/120580055 2.创建自定义属性和节点 https://blog.c ...
JS的DOM操作3--删除事件，注册事件与冒泡⭐⭐⭐(附带动图案例)
1.获取元素与修改元素 https://blog.csdn.net/TroyeSivanlp/article/details/120580055 2.创建自定义属性和节点 https://blog.c ...
失去jQuery Bloat —使用NodeList.js进行DOM操作
p.tip {background-color: rgba(128,128,128,0.05);border-top-right-radius: 5px;border-bottom-right-rad ...
JS的DOM操作——style的操作
对于JS操作文档中的元素,改变其的样式特征需要用到一个属性--style 常见操作:获取的元素点(·)style.xx(需要设置或修改的属性) 代码演示:例如修改div块的背景颜色 <style ...

js之DOM操作（插入节点insertBefore()）

插入节点insertBefore()

js之DOM操作（插入节点insertBefore()）相关推荐

最新文章

热门文章