案例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] questions conlusion_InOrder, PreOrder, PostOrder traversal

    Pre: node 先,                      Inorder:   node in,           Postorder:   node 最后 PreOrder Inorde ...

  2. Repeater 中TextBox 触发TextChanged事件

    两种方法 1.TextBox 绑定TextChanged 并设置AutoPostBack ="true" ,如果不设置AutoPostBack ="true"则 ...

  3. Geckofx 45 正确模拟键盘输入的事件绑定方法

    var inputs = selection.GetElementsByTagName("input").Select(p => p as Gecko.DOM.GeckoIn ...

  4. Sql之left join(左关联)、right join(右关联)、inner join(自关联)的区别

    参考:https://blog.csdn.net/hj7jay/article/details/51749863

  5. 漏洞复现:Struts2 远程代码执行漏洞(S2-033)

    docker pull medicean/vulapps:s_struts2_s2-033 docker run -d -p 80:8080 medicean/vulapps:s_struts2_s2 ...

  6. HDU 2254 奥运(矩阵+二分等比求和)

    奥运 [题目链接]奥运 [题目类型]矩阵+二分等比求和 &题解: 首先离散化城市,之后就是矩阵快速幂了,但让求的是A^(t1)+A^(t1+1)+...+A^(t2),我先想的是打表,但时间真 ...

  7. MongoDB Driver:使用正确的姿势连接复制集

    from:https://yq.aliyun.com/articles/8461?spm=5176.7937264.222114.10.s2oqcT   摘要: MongoDB复制集(Replica ...

  8. C#6.0中10大新特性的应用和总结

    微软发布C#6.0.VS2015等系列产品也有一段时间了,但是网上的教程却不多,这里真对C#6.0给大家做了一些示例,分享给大家.   微软于2015年7月21日发布了Visual Studio 20 ...

  9. base64的编码

    计算机中的数据一般是由ascii编码,来存储的, 0---31以及127,表示的是控制字符: 32-126表示的是字符,包括空格,阿拉伯数字,大小写字母: 之后的128个字符,是不可见的字符, 在网络 ...

  10. Python之描述器

    1.描述器的表现 用到三个魔术方法,__get__(), __set__(), __delete__() 方法签名如下 object.__get__(self,instance,owner) obje ...