js 中标签的增删 方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
height:800px;
width: auto;
background-color: #204982;
font-size: 20px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">hello div</div>
<p id="p">hello p</p>
</div>
<input type="button" value="增加" onclick="func1()">
<input type="button" value="删除" onclick="func2()"> <script> function func1() {
var ele=document.getElementById("div1"); //增加必须找到要增加标签的父级标签
var add_son=document.createElement("p"); // 这是一个创建P标签的方法
ele.appendChild(add_son); // 这是给父级标签添加一个孩子
add_son.innerHTML="<b>添加成功!</b>" // 给新添加的子标签 加上文本 也可以加上标签,引号内对于innerHTML来说都是字符串
}
function func2() {
var ele=document.getElementById("div1"); //删除与增加一样,同样要找到父级标签
var del_son=ele.lastElementChild; // 指明要删除的标签在最后的位置(last)
ele.removeChild(del_son); // remove方法删除父级下的子标签
}
</script>
</body>
</html>
js 中标签的增删 方法的更多相关文章
- JS获取标签内容的方法
JS获取标签内容的方法 测试代码 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- node.js中的url.parse方法使用说明
node.js中的url.parse方法使用说明:https://blog.csdn.net/swimming_in_it_/article/details/77439975 版权声明:本文为博主原创 ...
- JS中 call() 与apply 方法
1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...
- JS中定义类的方法
JS中定义类的方式有很多种: 1.工厂方式 function Car(){ var ocar = new Object; ocar.color = "blue" ...
- js中this和回调方法循环-我们到底能走多远系列(35)
我们到底能走多远系列(35) 扯淡: 13年最后一个月了,你们在13年初的计划实现了吗?还来得及吗? 请加油~ 主题: 最近一直在写js,遇到了几个问题,可能初入门的时候都会遇到吧,总结下. 例子: ...
- js中object的申明方法
//js中的对象申明使用new Object(); //object类型的数据类似于数组通过下表来访问其中的值 //example1 var person=new Object(); person.n ...
- JS中令人发指的valueOf方法介绍
彭老湿近期月报里提到了valueOf方法,兴致来了翻了下ECMA5里关于valueOf方法的介绍,如下: 15.2.4.4 Object.prototype.valueOf ( ) When the ...
- js 中读取JSON的方法探讨
方法一:函数构造定义法返回 var strJSON = "{name:'json name'}"; //得到的JSONvar obj = new Function("r ...
- JS中定义类的方法<转>
转载地址:http://blog.csdn.net/sdlfx/article/details/1842218 PS(个人理解): 1) 类通过prototype定义的成员(方法或属性),是每个类对象 ...
随机推荐
- vs2015+opencv3.3.1 实现 c++ 灰度高斯滤波器
#include <opencv2\highgui\highgui.hpp> #include <iostream> #include<vector> using ...
- 汇编Shellcode的技巧
汇编Shellcode的技巧 来源 https://www.4hou.com/technology/3893.html 本文参考来源于pentest 我们在上一篇提到要要自定义shellcode,不 ...
- Hdp 4 window MR 注意事项
1,本机未安装HDP, 在代码中加一个环境变量,跳过检查. Environment.SetEnvironmentVariable("HADOOP_HOME", @"D ...
- 19.阻止事件冒泡e.stopPropagation();
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- struts2学习笔记(四)——访问Servlet的API&结果跳转&数据封装
一.Struts2访问Servlet的API 前面已经对Struts2的流程执行完成了,但是如果表单中有参数如何进行接收?又或者我们需要向页面保存一些数据,又要如何完成呢?我们可以通过学习Struts ...
- selenium定位不到元素
selenium定位不到元素时,网上大部分查到都是iFrame的切换问题,然后是多窗口.句柄的处理问题, 在初学是遇到定位不到元素,一直在找上面的问题,发现都不是上面的问题, 后来才发现是页面刷新的问 ...
- C++_友元2-友元成员函数
接着上一篇<友元是什么>中,我们发现Remote友元类的大多数方法都是用Tv类的公有接口实现.这意味着这些方法并不是真正需要友元. 事实上唯一直接访问Tv成员的Remote方法是Remot ...
- Tarjan算法打包总结(求强连通分量、割点和Tarjan-LCA)
目录 Tarjan打包总结(求强连通分量.割点和Tarjan-LCA) 强连通分量&缩点 原理 伪代码 板子(C++) 割点 原理 伪代码 最近公共祖先(LCA) 原理 伪代码 板子 Tarj ...
- ZOJ - 2676 01分数规划 浮点ISAP
题意:求最小割集\(C\),使得\(\frac{\sum_{i∈C} cost_i}{|C|}\)最小 模型就是01分数规划\(\frac{\sum_{i=1}^{m}cost_i*x}{\sum_{ ...
- Collectors.groupingBy分组后的排序问题
默认groupingBy代码里会生成一个HashMap(hashMap是无序的,put的顺序与get的顺序不一致) HashMap是无序的,HashMap在put的时候是根据key的hashcode进 ...