php生成网页按钮,JavaScript实现自动生成网页元素功能(按钮、文本等)_javascript技巧...
创建元素的方法:
1、利用createTextNode()创建一个文本对象
2、利用createElement()创建一个标签对象
3、直接利用容器标签中的一个属性:innerHTML-----本质上改该标签容器中的“html代码”,不是我们认为的对象树的操作
详解代码:
这是div模块--
必须好好地学习,这样才能让自己有很好的回报
好好干,加油↖(^ω^)↗
你懂得区域,实验区域
方式一 :创建文本文档
function addNode1(){
//1利用createTextNode()创建一个文本对象
var text=document.createTextNode("这是修改的,创建的文档");
//2获取div对象
var node1=document.getElementById("div_id1");
//添加成div对象的孩子
node1.appendChild(text);}
方式二:利用createElement()创建一个标签对象
function addNode2(){
//1,利用createElement()创建一个标签对象
var nn=document.createElement("input");
nn.type="button"
nn.value="创建的按钮";
nn.target="_blank";
//2,获得div对象
var node2=document.getElementById("div_id2");
//添加成div对象的孩子
node2.appendChild(nn);
}
方式三:直接利用容器标签中的一个属性:innerHTML-----本质上改该标签容器中的“html代码”,不是我们认为的对象树的操作
function addNode3(){
var mm=document.getElementById("div_id3");
mm.innerHTML="";
}
删除节点
使用 removeNode 和 removeChild 从元素上删除子结点两种方法,通常采用第二种方法
function removenode(){
var node =document.getElementById("div_id4");
// alert(node.nodeName);//DIV
// 自杀式 node.removeNode(true); //removeNode 从文档层次中删除对象。ie可以出现现象,一般不采用自杀式
node.parentNode.removeChild(node);通过父节点去删除它的孩子,一般常用
alert("aa");
}
替换 没有保留替换的那个
function remove2(){
var node1 =document.getElementById("div_id1");
var node2 =document.getElementById("div_id2");
// node1.replaceNode(node2);//自杀式不通用
通过父节点去替换它的孩子:用node1去替换node2
node1.parentNode.replaceChild(node1,node2);//object.replaceChild(oNewNode, oChildNode)
}
clone节点
function clone(){
var node1 =document.getElementById("div_id1");
var node2 =document.getElementById("div_id2");
var node1_2=node1.cloneNode(true);//false只能clone基本的,不会clone下面的其他子节点
//克隆一个对象,默认参数为false。参数为true时,连子节点一起克隆
node1.parentNode.replaceChild(node1_2,node2);
}
效果图:
全部的源代码:
DOM_operation.html
这是div模块--
必须好好地学习,这样才能让自己有很好的回报
好好干,加油↖(^ω^)↗
你懂得区域,实验区域
以上就是为大家分享如何通过JavaScript实现自动生成网页元素功能的方法,希望对大家的学习有所帮助。
php生成网页按钮,JavaScript实现自动生成网页元素功能(按钮、文本等)_javascript技巧...相关推荐
- 自动打开html网页脚本,开启网页全屏插件(自动开启网页全屏脚本js插件)
开启网页全屏插件(自动开启网页全屏脚本js插件)是由作者陈鹏杰分享的一个浏览器扩展插件.通过本脚本,用户在网页加载完4秒后,启动网页全屏.非常简单方便快捷! 脚本描述: 在以下网页开启网页全屏 b 站 ...
- JavaScript:自动生成博文目录导航
感谢 孤傲苍狼 分享了 自动生成博文目录的方法,本文仅作存档使用. 图 1:效果预览 CSS 样式 #TOCbar{font-size:12px; text-align:left; position: ...
- mysql php 新手卡生成_PHPMaker(基于MYSQL数据库自动生成PHP 脚本的软件)
PHPMaker 注册版是一款PHP代码自动生成工具,一款在Windows平台上运行的基于MYSQL数据库自动生成PHP脚本的软件.使用生成的PHP代码,你可以通过WEB网页 对数据库的记录进行浏览. ...
- excel自动生成舒尔特表_EXCEL自动生成的PPT
因为经常要做周报.月报PPT,每次重复的的操作效率很低,这里整理了一套可以自动生成PPT的办法. 首先,大概思路是这样的.周报.月报这类经营分析类PPT一般都是由表格.图表以及分析文字组成的,整体结构 ...
- 快递取件码生成软件_一种自动生成取件码的快递柜及其使用方法与流程
本发明涉及快递柜技术领域,尤其是自动生成取件码的快递柜及其使用方法. 背景技术: 近年来,随着快递业的迅速发展,快递柜的应用也越发广泛.为了解决快递智能存储问题,许多小区已经安装了智能快递柜,快递员将 ...
- 文件夹自动生成html画廊,【桌面自动生成文件夹】桌面自动生成网站_桌面自动生成tmp文件-系统城...
2017-01-26 13:59:36 浏览量:11190 有的用户发现自己的电脑系统中,总是会在桌面上生成一个名称为MobileFile的文件夹.其实,这个MobileFile文件夹是QQ相关的文件 ...
- 自动生成表格html,js实现自动生成表格功能的代码实例
js实现自动生成表格功能的代码实例 发布时间:2020-07-18 17:45:52 来源:亿速云 阅读:115 作者:小猪 这篇文章主要讲解了js实现自动生成表格功能的代码实例,内容清晰明了,对此有 ...
- IDEA自动生成类注解,IDEA作者信息自动生成,IDEA类信息自动生成
在新建类文件的时候自动生成注解,诸如我们常见的那些 作者,创建时间,TODO 等等 将以下格式的代码放在Settings -> File and Code Templates -> Inc ...
- 使用Visual Studio宏来自动生成代码 [ Visual Studio | 宏 | 自动生成代码 ]
前言 宏的定义:是组合到一起形成一个命令以自动完成某项任务的一系列命令和指令.(MSDN) 在使用Visual Studio宏实现JS折叠功能的时候就想过用它来实现代码自动生成,有了前面的基础,实现起 ...
最新文章
- bzoj1059: [ZJOI2007]矩阵游戏
- VC,一条会被鼠标移动的直线
- git push命令_Git Push命令解释
- 【51Nod - 1272 】最大距离 (思维,排序sort的空间优化)
- 转发程序无法决定链接类型
- Web前端笔记(5)
- 人工智能规模化落地还有哪些坑?阿里副总裁华先胜连麦详解!
- 递归 人理解循环 神理解递归
- 信号峰拟合的MATLAB程序,包括高斯拟合,多高斯拟合等多种类型
- 惯性矩如何计算机械转动惯量,[转载]ug中的惯性矩与转动惯量
- 在html中怎样加表格斜线表头,如何在Word表格中插入斜线
- Git:rebase 是什么
- 高分一号(GF-1)影像数据下载方法
- 电源纹波和电源噪声有什么区别?
- 基于python压缩gif图片大小。
- Python File处理方法
- 教程篇(7.0) 04. FortiClient 部署 ❀ FortiClient EMS ❀ Fortinet 网络安全专家 NSE 5
- 【Qt5开发及实例】16、实现一个简单的文本编辑器(over)
- 使用putty等ssh工具第一次远程登录树莓派,填默认账号密码pi,raspberry,报错:Access denied
- COOX基础培训之PMT