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宽 ...
随机推荐
- python利用requests统计1个接口的响应时间
参照 https://www.cnblogs.com/yoyoketang/p/8035428.html requests统计接口的响应时间有2种方式 r.elapsed.total_seconds( ...
- 00The C Programming Language
The C Programming Language C语言是一门面向过程.抽象化的通用程序设计语言,广泛应用于底层开发.C语言能以简易的方式编译.处理低级存储器.C语言是仅产生少量的机器语言以及不需 ...
- 【Hadoop】四、HDFS的java接口
Hadoop是用java语言实现的,因此HDFS有很好的java接口用以编程,重点就是Hadoop的FileSystem类,它是所有文件系统的抽象类,HDFS实例(DistributedFileS ...
- 一步一步实现基于GPU的pathtracer(三):path tracing 简述
全局光照这个名词在计算机图形学里已经不算一个新名词了,现在一提到拟真度,很多人基本上都会去想到全局光照,这个名词上世纪七八十年代就有了,好像是由一个叫Jim Kajiya的大神在他那篇已经被引用了不知 ...
- 51nod 1083 矩阵取数问题【动态规划】
一个N*N矩阵中有不同的正整数,经过这个格子,就能获得相应价值的奖励,从左上走到右下,只能向下向右走,求能够获得的最大价值. 例如:3 * 3的方格. 1 3 3 2 1 3 2 2 1 能够获得的最 ...
- Many Equal Substrings CodeForces - 1029A (kmp next数组应用)
题目大意 题目看样例也能猜到就是输出最短的循环串. 吐槽 明明是div3第一题为啥子还会用到kmp的知识? 解法 这个题仔细看发现是求最长可去除的后缀,也就是说去除跟下一个相同的字符串还能连接起来.这 ...
- <MyBatis>入门四 传入的参数处理
1.单个参数 传入单个参数时,mapper文件中 #{}里可以写任意值 /** * 传入单个参数 */ Employee getEmpById(Integer id); <!--单个参数 #{} ...
- eclipse 中导入 MyBatis 的源码
(1)选中 Mybatis-3.2.2.jar ,右击,在弹出的快捷菜单中选择 “Properties” 选项,进入属性界面. (2)进入属性界面后,选中 “Java Source Attachme ...
- mysql的密码管理、mysql初始密码查找、密码修改、mysql登录
1.查询mysql的初始密码: 初始密码密码是随机产生的,每台机器产生的都不一样的 grep 'temporary password' /var/log/mysqld.log 或者 cat /var/ ...
- centOS目录结构介绍
Linux / CentOS目录结构 /: 根目录,一般根目录下只存放目录,不要存放文件,/etc./bin./dev./lib./sbin应该和根目录放置在一个分区中 /bin:/usr/bin: ...