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);

}

效果图:

91b5858116c03cd91e1c5d31d6930d9e.png

全部的源代码:

DOM_operation.html

这是div模块--

必须好好地学习,这样才能让自己有很好的回报

好好干,加油↖(^ω^)↗

你懂得区域,实验区域

以上就是为大家分享如何通过JavaScript实现自动生成网页元素功能的方法,希望对大家的学习有所帮助。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/345036.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

adf 自动输稿器_在ADF实体PK属性中使用MySQL自动增量PK列

adf 自动输稿器大家好。 继续进行ADF MySQL解决方法系列,今天我们将看到需要做些什么才能将MySQL PK自动增量列与ADF实体PK属性一起使用。 如果使用的是Oracle数据库,则可以使用oracle.jbo.domain.DBSequence以及序列和触发器来立即进行操作。 为简单起…

探索适用于Apache Spark的Spline Data Tracker和可视化工具(第1部分)

最近引起我注意的一个有趣且充满希望的开源项目是Spline ,它是由Absa维护的Apache Spark的数据沿袭跟踪和可视化工具。 该项目由两部分组成:一个在驱动程序上工作的Scala库,该驱动程序通过分析Spark执行计划来捕获数据沿袭,并提供…

高性能mysql 聚簇索引,高性能MySQL笔记-第5章Indexing for High Performance-005聚集索引...

一、聚集索引介绍1.什么是聚集索引?InnoDB’s clustered indexes actually store a B-Tree index and the rows together in the same structure.2.为什么一张表只能一个聚集索引?When a table has a clustered index, its rows are actually stored in …

PHP应用GD2函数填充几何图形,使用GD2函数绘制几何图形(PHP图形图像的典型应用教程4)...

使用GD2函数绘制几何图形(PHP图形图像的典型应用教程4)本篇主要讲解使用GD2函数实现几何图形的绘制,首先我们需要的事创建一个图像,在之前的文章中我们就说过了,创建图像是所有图像操作的第一步,然后再背景上根据坐标点绘制图形轮…

API测试和自动化101:基本指南

API代表A pplication P AGC软件我覆盖整个院落。 通常,API用于通过使用任何通信方式来促进两个不同应用程序之间的交互。 在网络上使用API​​时,我们将其称为“ Web服务”。 最近,API已成为编程的Struts。 与在应用程序中一样,编…

oracle数据库安装HotSpot,安装Oracle数据库软件遭遇诡异的HotSpot Virtual Machine Error : 11报错...

虽然也装了很多次的数据库了,可是偶尔还是会碰见一些很无语的错误,前两天在RHEL5.0上安装Oracle 10g 10.2.0.1,起图形后点击下虽然也装了很多次的数据库了,可是偶尔还是会碰见一些很无语的错误,前两天在RHEL5.0上安装O…

linux结束所有任务命令行,Linux基础命令(15)定时任务

释放双眼,带上耳机,听听看~!crontadLinux定时任务Crontab命令详解linux 系统则是由 cron (crond) 这个系统服务来控制的。Linux 系统上面原本就有非常多的计划性工作,因此这个系统服务是默认启动的。另 外, 由于使用者自己也可以设…

如何修复无效的目标版本:Maven Build中的1.7、1.8、1.9或1.10错误

如果您正在使用Maven构建Java项目,可能是在Eclipse中,或者是通过运行mvn install在命令提示符下构建的,并且构建失败并显示诸如“无效的目标发行版:1.7”或“无效的目标发行版:1.8”之类的错误,那么您来了到…

Linux查看时间段文件,Linux查看特定时间段内修改过的文件

一.Linux系统日志的一些信息,日志配置文件syslog.conf系统日志一般都存在/var/log下常用的系统日志如下:核心启动日志:/var/log/dmesg系统报错日志:/var/log/messages邮件系统日志:/var/log/maillogFTP系统日志:/var/log/xferlog安全信息和系统登录与网络连接的信息…

使用ClickHouse UDF与OpenAI模型集成

本文字数:14683;估计阅读时间:37 分钟 作者:Dale McDiarmid 审校:庄晓东(魏庄) 本文在公众号【ClickHouseInc】首发 Meetup活动 ClickHouse Shenzhen User Group第1届 Meetup 火热报名中&#x…

使用Spring Boot和Vue.js构建一个简单的CRUD应用

“我喜欢编写身份验证和授权代码。” 〜从来没有Java开发人员。 厌倦了一次又一次地建立相同的登录屏幕? 尝试使用Okta API进行托管身份验证,授权和多因素身份验证。 在本教程中,您将使用Vue.js作为客户端并将Spring Boot作为资源服务器来构…

linux安装 icc编译器,安装 Intel Compiler (ifort icc icpc)

在下载目录下解压heqinheqin-dell:~/Downloads$ tar zxvf parallel_studio_xe_2017_update7.tgz进入解压后的文件夹heqinheqin-dell:~/Downloads$ cd parallel_studio_xe_2017_update7/为了记录过程而不用截图,我选择用命令行安装,当然你也可以用install…

linux 安装mongodb 64,在CentOS 6.x 64bit上安装MongoDB 3.2社区版

基本安装步骤参考: https://docs.mongodb.org/manual/tutorial/install-mongodb-on-red-hat/1) 创建repo源文件:sudo vim /etc/yum.repos.d/mongodb-org-3.2.repo内容如下:[mongodb-org-3.2]nameMongoDB Repositorybaseurlhttps://repo.mongodb.org/yum/redhat/$releasever/mon…

[免费网络研讨会] Java 11的第一印象

一年多以前,我们正焦急地等待新的模块化Java 9的到来。大约在同一时间,引入了一个新的发布周期,该周期将每6个月发布一次新版本,并提供长期支持(LTS)。每3年发行一次(或每6个版本发行一次&#…

linux可以http安装么,Linux 5下 http的安装

Web网站服务(一)http.conf中的全局配置ServerRoot:用于设置httpd服务的根目录,该目录中包括运行Web站点必须的目录和文件。默认根目录为:/usr/local/apache2Listen:用于设置Apache服务器监听的网络端口号,默认为80User…

APIGEE – API网关简介

在本文中,我想简要介绍一下APIGEE。 APIGEE主要提供现成的以下功能作为api网关。 协议转换 与任何协议进行转换,包括SOAP,REST,XML二进制或自定义 交通管理 开箱即用的灵活,分布式配额管理,速率限制和峰…

内存泄漏分析_调查内存泄漏第2部分–分析问题

内存泄漏分析这个小型系列的第一个博客介绍了如何创建一个非常泄漏的示例应用程序,以便我们可以研究解决服务器应用程序上基于堆的问题的技术。 它展示了Producer-Consumer模式的一个大问题,即消费者代码必须能够至少与生产者一样快(甚至不是…

将Java Flight Recorder与OpenJDK 11结合使用

Java Flight Recorder(JFR)曾经是Oracle JDK的商业附加组件。 由于它是与Java Mission Control一起最近开源的,因此使用OpenJDK 11的每个人现在都可以使用此出色的工具免费对Java应用程序进行故障排除。 JFR以前是专有解决方案,对…

c语言开发工具程序代码是什么文件,【C语言】开发工具--GCC使用入门

来自: 51CTO GCC使用入门通常所说的GCC是GUN Compiler Collection的简称,除了编译程序之外,它还含其他相关工具,所以它能把易于人类使用的高级语言编写的源代码构建成计算机能够直接执行的二进制代码。GCC是Linux平台下最常用的编…

无服务器安全性:将其置于自动驾驶仪上

Ack :本文是从个人经验以及从无服务器安全性的其他多个来源学到的东西的混合。 我无法在这里列出或确认所有这些信息; 但是,应该特别感谢The Register , Hacker Noon , PureSec以及Serverless Status和Serverless&…