<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <h1>helloworld</h1>

        <script type="text/javascript">

            var h1 = document.querySelector('h1')

            //一般使用innerHTML,可以将HTML的字符串直接放置进来，那么浏览器会自动生成相对应的文档对象和显示内容

            h1.innerHTML = "<span style='font-size: 12px; color: #aaa;'>samalltitle</span>BigTitle"

//            h1.innerText = '<span>helloworld</span>'

            var span = document.querySelector('span')

            console.log(span)

            span.innerHTML = 'helloworld'

//            document.write('<h3>helloworld</h3>')

            //创建元素

            var h3 = document.createElement('h3')

            h3.innerHTML = '这是H3'

            //获取想要添加进去的父级元素

            var body = document.body

            //使用appendchild,追加子元素，将h3添加进body

            body.appendChild(h3)

//            body.removeChild(h3)

            //仅仅通过自己就可以删除自己

            h3.parentElement.removeChild(h3)

        </script>

    </body>

</html>

Dom对象更改文档结构.html的更多相关文章

  1. 精讲 org.w3c.dom(java dom)解析XML文档

    org.w3c.dom(java dom)解析XML文档 位于org.w3c.dom操作XML会比较简单,就是将XML看做是一颗树,DOM就是对这颗树的一个数据结构的描述,但对大型XML文件效果可能会 ...

  2. Win 10 开发中Adaptive磁贴模板的XML文档结构，Win10 应用开发中自适应Toast通知的XML文档结构

    分享两篇Win 10应用开发的XML文档结构:Win 10 开发中Adaptive磁贴模板的XML文档结构,Win10 应用开发中自适应Toast通知的XML文档结构. Win 10 开发中Adapt ...

  3. MongoDB学习笔记(四) 用MongoDB的文档结构描述数据关系

    MongoDB的集合(collection)可以看做关系型数据库的表,文档对象(document)可以看做关系型数据库的一条记录.但两者并不完全对等.表的结构是固定的,MongoDB集合并没有这个约束 ...

  4. PHP中利用DOM创建xml文档

    DOM创建xml文档 用dom创建如下文档: <booklist> <book id="1"> <title>天龙八部</title> ...

  5. 4. svg学习笔记-文档结构元素和样式的使用

    svg除了绘图元素之外还有一部分是专门用于文档结构的,这类元素有<g>,<use>,<defs>,<symbol>等 <g>元素 如果我们仅 ...

  6. 10LaTeX学习系列之---Latex的文档结构

    目录 目录 前言 (一)对于Ctex宏包中的文档结构 1.说明 2.源代码 3.输出效果 4.技巧 (二)对于ctexart的文档结构 1.说明 2.源代码 3.输出效果 (三)对于ctexbook的 ...

  7. CSS设计指南之一 HTML标记与文档结构

    HTML标记与文档结构 之所以从HTML讲起,是因为CSS的用途就是为HTML标记添加样式. 1.1 HTML标记基础 对于每个包含内容的元素,根据它所包含的内容是不是文本,有两种不同的方式给它们加标 ...

  8. 使用DOM解析XML文档

    简单介绍一下使用DOM解析XML文档,解析XML文件案例: <?xml version="1.0" encoding="UTF-8"?> -< ...

  9. python beautifulsoup基本用法-文档结构

    一.BeautifulSoup概述 BeautifulSoup是python的一个库,用于接收一个HTML或XML字符串并对其进行格式化,然后使用提供的方法快速查找指定元素. 使用BeautifulS ...

随机推荐

  1. Wordpress设置Pretty Permalink的方法

    设置Wordpress的Pretty Permalink的关键点莫过于下面几点(本文是基于Apache httpd服务器). 1.Apache httpd要有rewrite module 在httpd ...

  2. CentOS 7上编写自定义系统审计规则

    1)简介 Linux审计系统创建审计跟踪,这是一种跟踪系统上各种信息的方法.它可以记录大量数据,如事件类型,日期和时间,用户ID,系统调用,进程,使用的文件,SELinux上下文和敏感度级别.它可以跟 ...

  3. for for in 给已有的li绑定click事件生成新的li也有click事件

    想要给已有的li元素绑定一个click事件,点击生成新的li元素,并且新的li元素也要有click事件 //不能用for循环给每个li绑定click事件 因为这样的话 后面新生成的li就没有click ...

  4. 【PCIE-1】---Pcie基本概念普及（扫盲篇--巨适合新手）

    PCIE由早期得PCI扩展衍生而来并且对兼容PCI,两者得主要区别在于并行到串行得切换,且速率更快.目前主板上越来越多得设备都挂载到PCI总线下面,甚至部分硬盘也会挂载PCI总线下面,可见PCIE得应 ...

  5. 在网页中动态地给表格添加一行内容--HTML+CSS+JavaScript

    需求描述: 用户在页面上点击按钮,可以把文本框中的数据在表格的新的一行中显示,具体表现如下图: 如果如果输入框内容有一项为空,弹出对话框‘请将数据填入完全 步骤: 1.按钮注册单击事件 2.获取并判断 ...

  6. 运维自动化神器ansible之group模块

    ansible之group模块 group模块是用来添加或者删除组 首先使用ansible-doc来查看用法 [root@note0 ansible]# ansible-doc -s group - ...

  7. 并发新构件之DelayQueue:延时队列

    DelayQueue:延时队列,首先是一个队列,所以可以持有对象,但是仅限于实现了Delayed接口的对象.重写getDelay()和compareTo()(因为要比较)方法: 通俗来讲:延时队列的就 ...

  8. conversion function——转换函数

    类型转换函数 与 explicit关键字 1.类型转换函数 在C++中,可以使用构造函数将一个指定类型的数据转换为类的对象,也可以使用类型转换函数 (type conversion function) ...

  9. Python_生成随机验证码

    内置函数 chr() ord() 这两个内置函数是用来对十进制(十六进制也可以)与ASCii之间进行转换 chr() : 将十进制转换成ASCii对应字母或符号 t_1 = chr(99) t_2 = ...

  10. NServiceBus+Saga开发分布式应用

    前言       当你在处理异步消息时,每个单独的消息处理程序都是一个单独的handler,每个handler之间互不影响.这时如果一个消息依赖另一个消息的状态呢? 这时业务逻辑怎么处理?       ...