js添加页面元素
js动态创建html元素需要使用到下面这些常见的js方法。
getElementById();//返回带有指定 ID 的元素。
getElementsByTagName();//返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。
getElementsByClassName();//返回包含带有指定类名的所有元素的节点列表。
appendChild();//把新的子节点添加到指定节点。
removeChild();//删除子节点。
replaceChild();//替换子节点。
insertBefore();//在指定的子节点前面插入新的子节点。
createAttribute();//创建属性节点。
createElement();//创建元素节点。
createTextNode();//创建文本节点。
getAttribute(); //返回指定的属性值。
setAttribute(); //把指定属性设置或修改为指定的值。
下面的示例代码在id为parent_div的div内部创建id为child_div的div,再在child_div内部创建id为r_id的radio,并使其被选中。
var newdiv=document.createElement("div");
newdiv.id="child_div";
document.getElementById("parent_div").appendChild(newdiv);
var radio= document.createElement("input");
radio.setAttribute("type","checkbox");
radio.setAttribute("name","r_name");
radio.setAttribute("id",'r_id');
document.getElementById('child_div').appendChild(radio);
document.getElementById('child_div').appendChild(document.createTextNode("选择我"));
radio.setAttribute("checked",'checked');
js添加页面元素的更多相关文章
- js实现页面元素随着内容的滚动而滚动
CreateTime--2017年9月4日16:55:06 Author:Marydon js实现页面元素随着内容的滚动而滚动 分析: CSS样式,使用绝对定位确定好页面元素在屏幕的位置(如:正中 ...
- Selenium with Python 005 - 调用js操作页面元素
WebDriver提供了execute_script()方法来执行JavaScript方法,格式如 driver.execute_script(script,*args) 执行js一般有两种场景,一是 ...
- F12修改html进行本地js操作页面元素
F12修改html进行本地js操作页面元素
- js为页面元素添加水印
近期有需求为页面部分区域添加上水印,通过在网上找到了js为页面添加水印的方法,后来经过自己的改进,可以实现为页面部分元素添加水印,最终效果如下图: 代码如下: function watermark(s ...
- js获取页面元素距离浏览器工作区顶端的距离
先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome) 网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript) ...
- JS获取页面,元素,窗口和返回页面,元素,窗口的宽高以及滚动值
jquery获取页面,元素,窗口的宽高以及滚动值 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window) ...
- js添加删除元素
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- JS获取页面元素并修改
//实现代码如下,非常简单<script> (function(){ var ele = document.getElementsByTagName("ul"); // ...
- JS添加DOM元素CSS权重BUG
修改删除table的时候,比如拆分合并单元格,合并全部TR中的某个TD后在拆分还原,即使直接在td标签中设置了td的高宽属性,当td在css文件中设置为宽度auto的时候,不能显示出TD来,显示TD宽 ...
随机推荐
- 【转载】自制4412底板自动进入SD卡更新模块
转载自迅为论坛:http://www.topeetboard.com参考平台:迅为iTOP-4412开发板 问题如下:在自制的底板上,当SD卡插在板子上开机时,会自动进入Updating模式,如果SD ...
- Crash (computing)
In computing, a crash (or system crash) occurs when a computer program, such as a software applicati ...
- 如何在网页中浏览和编辑DWG文件 梦想CAD控件
如何在网页中浏览和编辑DWG文件 梦想CAD控件 www.mxdraw.com 梦想绘图控件5.2 是国内最强,最专业的CAD开发组件(控件),不需要AutoCAD就能独立运行.控件使用VC 201 ...
- 【转载】linux下的zookeeper启动
zookeeper的安装目录:/usr/local/zookeeper-3.4.6/bin/zkServer.sh; 配置文件路径:../conf/zoo.cfg 端口 :2181: ZooKeepe ...
- case when里的like功能 ////// 截取(substr)
case when里的like功能 假如要用到case when又要用到like这样的功能,即如果字符串包含‘语文’就怎么怎么样,包含‘数学’就怎么怎么样,包含‘英语’就怎么怎么样,like是用于wh ...
- x shell 连接不上本地虚拟机
登陆虚拟机服务器 输入ipconfig查看ip 地址(如果提示命令不存在,输入 ip addr) 输出结果中看标记处是否出现ip地址.我的打开后这里是没有地址的 然后输入 vi /etc/syscon ...
- 剑指offer---圆圈中最后剩下的数
题目:圆圈中最后剩下的数 要求:0,1,2...n-1 共n个数排成一个圆圈,从数字0开始,每次删除第m个元素,求这个圆圈里面剩下的最后一个元素 如 n=5, m=3 的情况:0, 1, 2, 3, ...
- Java对象序列化为什么要使用SerialversionUID
1.首先谈谈为什么要序列化对象 把对象转换为字节序列的过程称为对象的序列化. 把字节序列恢复为对象的过程称为对象的反序列化. 对象的序列化主要有两种用途: 1) 把对象的字节序列永久地保存到硬盘上,通 ...
- Python的/整除
在python3和python2里,正整数的/结果是一样的,但是负数的整除却有区别 比如python3中,-1/2是等于0的,c/c++的结果也是这样, 但在python2中,-1/2确是-1,想要得 ...
- 升级 HTTPS,价值何在?
HTTPS 实质上是一种面向安全信息通信的协议.从最终的数据解析的角度上看,HTTPS 与 HTTP 没有本质上的区别.对于接收端而言,SSL/TSL 将接收的数据包解密,将数据传给 HTTP 协议层 ...