<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <h1>标题1</h1>

        <h1>标题2</h1>

        <script type="text/javascript">

            var body = document.querySelector('body')

            var hbiaoti2 = document.querySelectorAll('h1')[1]

            var newDiv = document.createElement('p')

            newDiv.innerHTML = '这是一个段落'

                //这是替换

        //            body.replaceChild(newDiv,hbiaot

            //插入到某个元素的前面

                body.insertBefore(newDiv,hbiaoti2)

            //插入到某个元素的后面,原生JS里没有insertAfter

            body.insertBefore(newDiv,hbiaoti2.nextElementSibling)

        </script>

    </body>

</html>

替换dom操作的更多相关文章

  1. jQuery 源码解析(二十三) DOM操作模块 替换元素 详解

    本节说一下DOM操作模块里的替换元素模块,该模块可将当前匹配的元素替换指定的DOM元素,有两个方法,如下: replaceWith(value)     ;使用提供的新内容来替换匹配元素集合中的每个元 ...

  2. jQuery学习之路（2）-DOM操作

    ▓▓▓▓▓▓ 大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象. ▓▓▓▓▓▓ jQuery中的DOM操作 看 ...

  3. 从DOM操作看Vue&React的前端组件化，顺带补齐React的demo

    前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...

  4. 摆脱DOM操作，从TodoMVC看angularJS

    取代jQuery? 我很久之前便听说了angularJS的大名,之前的leader也经常感叹angularJS的设计如何如何精妙,可叹一直没有机会深入了解,国庆长假因为没钱出游,倒是可以对他做一个了解 ...

  5. 前端页面卡顿？或是DOM操作惹的祸，需优化代码

    文档对象模型(DOM)是一个独立 于特定语言的应用程序接口.在浏览器中,DOM接口是以JavaScript语言实现的,通过JavaScript来操作浏览器页面中的元素,这使得 DOM成为了JavaSc ...

  6. HTML 学习笔记 JQuery（DOM 操作）

    一般来说,DOM操作分为三个方面,即:DOM Core(核心), HTML_DOM 和 CSS_DOM. 1.DOM Core DOM Core 并不专属于JavaScript,任何一种支持DOM的程 ...

  7. jQuery的DOM操作详解

    DOM(Document Object Model-文档对象模型):一种与浏览器, 平台, 语言无关的规则, 使用该接口可以轻松地访问页面中所有的标准组件DOM操作的分类 核心-DOM: DOM Co ...

  8. 解密jQuery内核 DOM操作的核心函数domManip

    domManip是什么 dom即Dom元素,Manip是Manipulate的缩写,连在一起就是Dom操作的意思. .domManip()是jQuery DOM操作的核心函数 对封装的节点操作做了参数 ...

  9. 解密jQuery内核 DOM操作

    jQuery针对DOM操作的插入的方法有大概10种 append.prepend.before.after.replaceWith appendTo.prependTo.insertBefore.in ...

随机推荐

  1. 记一次Burp Suite的使用实例

       下载完的Bur是这样的,双击jar即可 最右边的键一直按,傻瓜式         先将要抓包的网页打开,此次以上传图片为例     第一步当然是先下载Burp Suite之后打开,查看设置代理地 ...

  2. 教你用开源 JS 库快速画出 GitHub 章鱼猫

    本文作者:HelloGitHub-kalifun 在上一篇文章我们介绍了 Zdog 如何使用,接下来这篇文章我将带领各位利用 Zdog 画出一个 GitHub 章鱼猫(和官方的还是有些差别的). Zd ...

  3. Proxy实现java动态代理

    在java设计模式中代理模式的应用比较广泛, 比如我在编写一写web程序时在filter修改request或response时, 而request中并没有相应的set方法, 这样要做到修改就需要使用一 ...

  4. IDEA新建一个多maven模块工程（有图）

    对于一些大型的项目来说,将项目的各个模块理清并进行管理,便于后续项目的维护,使用maven管理是很方便的,它可以很好的构建模块来设计项目的整体结构,对一些小型的项目不建议使用 1.新建父maven模块 ...

  5. springboot 集成druid

    1.druid简介 Druid首先是一个数据库连接池.Druid是目前最好的数据库连接池,在功能.性能.扩展性方面,都超过其他数据库连接池,包括DBCP.C3P0.BoneCP.Proxool.JBo ...

  6. vue 引入 fontawesome 报错 Could not find one or more icon(s) 解决

    在 vue 项目中引用 fontawesome , 按照官方说明如下步骤操作 1. 终端中执行 $ npm i --save @fortawesome/fontawesome-svg-core $ n ...

  7. 【Linux】Linux中的0644 和 0755的权限

    Linux 系统中采用三位十进制数表示权限,如0755, 0644ABCD A- 0, 表示十进制B-用户C-组用户D-其他用户 利用 ls -l可以查看文件的权限 ---  -> 0   (n ...

  8. Linux上编译安装PHP

    这篇文章主要介绍了关于Linux上编译安装PHP,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 之前在服务器上编译安装了PHP运行环境,但是安装完过了一段时间就差不多忘记了,只是零零星 ...

  9. Java 网络爬虫，就是这么的简单

    这是 Java 网络爬虫系列文章的第一篇,如果你还不知道 Java 网络爬虫系列文章,请参看 学 Java 网络爬虫,需要哪些基础知识.第一篇是关于 Java 网络爬虫入门内容,在该篇中我们以采集虎扑 ...

  10. 在 Cocos Creator 中使用 Protobufjs（一）

    一. 环境准备 我一直在探索Cocos H5正确的开发姿势,目前做javascript项目已经离不开 nodejs.npm或grunt等脚手架工具了. 1.初始化package.json文件 npm ...