案例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. [LeetCode] 367. Valid Perfect Square_Easy tag:Math

    Given a positive integer num, write a function which returns True if num is a perfect square else Fa ...

  2. 转: Java LinkedList基本用法

    LinkedList类是双向列表,列表中的每个节点都包含了对前一个和后一个元素的引用.LinkedList的构造函数如下1. public LinkedList():  ——生成空的链表2. publ ...

  3. Cocos Creator 音频API控制调频

    *****音频的一些控制***** cc.audioEngine.playMusic(this.BGAudio,true);//播放音乐(true代表循环) cc.audioEngine.stopMu ...

  4. unity3d对象池的使用

    说对象池之前首先来看看单例类和单例脚本的区别.这里有介绍 http://blog.csdn.net/lzhq1982/article/details/12649281 使用对象池的好处是不用每次都创建 ...

  5. vue中使用导出表格功能

    1.下载依赖 npm install -S file-saver xlsx npm install -D script-loader 2.在src下创建vendor文件夹,并在文件夹中放两个文件 Bl ...

  6. gitlab4.0->5.0->6.0->7.14->8.0->8.2升级

    参考官方文档: https://gitlab.com/gitlab-org/gitlab-ce/tree/master/doc/update 本地服务器为4.0.1版本  1)4.0.1->4. ...

  7. C# And Java 3DES加解密 ECB模式/PKCS7

    c#: /// <summary>     /// 完整     /// </summary>     public class TripleDESHelper1     { ...

  8. c# Mongodb创建自增列

    MongoCollection<BsonDocument> tblCount; if (!db.CollectionExists(tblCountName))            {   ...

  9. ruby中的alias和alias_method

    ruby中的alias和alias_method都可以重命名一个方法,它们的区别如下: 1.alias是ruby的一个关键字,因此使用的时候是alias :newname :oldname alias ...

  10. 软工网络15团队作业4——Alpha阶段敏捷冲刺4.0

    软工网络15团队作业4--Alpha阶段敏捷冲刺4.0 1.每天举行站立式会议,提供当天站立式会议照片一张. 2.项目每个成员的昨天进展.存在问题.今天安排. 成员 昨天已完成 今天计划完成 郭炜埕 ...