案例1 删除元素
如需删除 HTML 元素,需要清楚该元素的父元素
该js函数代码如下

function remove(){
var parent=document.getElementById("demo");
var child=document.getElementById("demo1");
parent.removeChild(child);
}

演示:隐藏例1

案例2 追加元素
代码实例:

function append(){
var para=document.createElement("p");
var node=document.createTextNode("in the world.");
para.appendChild(node);
var element=document.getElementById("demo2");
element.appendChild(para);
}

演示:追加element

Across the Great Wall,

we can reach every conner

需要注意的是这些事件应该只执行一次,可以在函数外面加一个布尔变量声明为true,在函数
里面使用if语句,然后将布尔变量改变为false,这样就可以让onclick事件只执行一次了。

参考资料:w3cschool

JavaScript修改元素的更多相关文章

  1. Selenium调用JavaScript修改元素属性

    修改元素的style,主要是将一些隐性元素显示出来,让元素可被操作: JavascriptExecutor  js = (JavascriptExecutor)driver; js.executeSc ...

  2. JavaScript 修改元素值

    document.getElementById('yybz').value=jsdata.toLocaleString(); document.getElementById('yybz').inner ...

  3. JavaScript 读取修改元素 及 伸拉门案例

    JavaScript 读取修改元素 及 伸拉门案例 版权声明:未经授权,严禁转载! 读取 / 修改元素 - 读取修改元素内容 - 读取修改元素属性 - 读取修改元素样式 元素的内容 读取或修改元素节点 ...

  4. JavaScript--DOM修改元素的属性

    一旦你获得了要修改的元素,可以有2种方式,来读取和修改它的属性:一种老的方式(它被更多的用户代理所支持)和一种新的DOM方法的方式.老的和新的用户代理都允许你以对象属性的方式获取和设置元素的属性. 先 ...

  5. JavaScript修改Canvas图片

    用JavaScript修改Canvas图片的分辨率(DPI)   应用场景: 仓库每次发货需要打印标签, Canvas根据从数据库读取的产品信息可以生成标签JPG, 但是这个JPG图片的默认分辨率(D ...

  6. JavaScript DOM 元素属性 状态属性

    JavaScript DOM 元素属性 状态属性 版权声明:未经允许,严禁转载! 元素的属性 核心 DOM 为我们提供了操作元素标准属性的统一 API. 所有属性节点都储存在元素的 attribute ...

  7. javascript修改html <b>标签里面的内容

    简单实现仅供参考: javascript修改html <b>标签里面的化妆步骤内容<体><b style=“width:100px:height:100px:border ...

  8. Dom修改元素样式

    提纲:我们可以通过js来修改元素的大小,颜色,位置等样式 1.element.style                         行内样式的操作 2.element.className    ...

  9. JavaScript通过元素id和name直接获取元素的方法

    概览: 偶然的机会,我在JavaScript中直接用HTML元素的id属性来获取该元素,并设置该元素的其他属性值,竟然能够正确解析不报错!于是我去查阅相关资料,也有其他同行这么用. 虽然说这种用法不是 ...

随机推荐

  1. javascript另类方法高效实现htmlencode()与htmldecode()函数

    最常见的做法是采用正则表达式替换的方法,将特殊字符如 < > & 等进行替换,htmlencode的时候这样替换还比较容易,但发过来htmldecode的时候就不一定好用了,因为需 ...

  2. WinRAR 5.40 & 4.20 & 3.93 的注册码 - rarreg.key

    把下面的数据复制到“记事本”中,用文件名“rarreg.key”命名该文件,保存到WinRAR安装文件夹即完成注册. 以下4个Key随便选一个复制都可以. WinRAR 5.40 版Key,复制箭头中 ...

  3. conda常用命令

    1. conda基本命令 检查Anaconda是否成功安装 conda --version 检测目前安装了哪些环境 conda info --envs 检查目前有哪些版本的python可以安装: co ...

  4. 隐藏apache服务器信息

    安装完apache一般第一时间都是关闭apache的版本信息,黑客会通过apache暴露出来的信息针对性的入侵,为了服务器的安全这些信息一定要及时关闭. 1.隐藏PHP版本 修改php.ini exp ...

  5. FluentScheduler:开源轻量级定时任务调度架构

    安装:FluentScheduler Install-Package FluentScheduler 一.控制台中使用 using System; using System.Collections.G ...

  6. string.Format格式化输出

    staticstring Format (string format,object arg0):将指定字符串中的一个或多个格式项替换为指定对象的字符串表示形式 (1)格式化货币(跟系统的环境有关,中文 ...

  7. Flume:sink.type=hive

    Flume以Kafka为Source,以Hive为Sink进行数据转存. 业务背景:公司要求将某四川城市的卡口数据实时接入大数据平台中,历史数据可以通过Hive进行Load,也就是增量数据的对接问题. ...

  8. C#学习入门第二篇

     4.转义字符\b    退格符\n     换行\r     回车,移到本行开头\t     水平制表符\\      代表反斜线字符“\“\'        代表一个单引号字符@字在字符串前面表示 ...

  9. MindMaster学习笔记

    参考博客 http://blog.sina.com.cn/u/6406591976 作者名叫“MindMaster思维导图的博客 ”写了一系列关于思维导图的博客,可以去学习下. 1.其中有一篇比较详细 ...

  10. DeepNetwork---tensorflow实现

    https://github.com/zle1992/Reinforcement_Learning_Game DeepQNetwork.py import numpy as np import ten ...