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宽 ...
随机推荐
- Java学习1_一些基础1——16.5.4
每个java程序中都必须有一个main方法,格式为: public class ClassName { public static void main(String[] args) { program ...
- MyBatis 中 resultMap 详解
resultMap 是 Mybatis 最强大的元素之一,它可以将查询到的复杂数据(比如查询到几个表中数据)映射到一个结果集当中.如在实际应用中,有一个表为(用户角色表),通过查询用户表信息展示页面, ...
- Linux 安装 JDK 详解
安装 JDK 说明:Linux 系统中安装软件需在 root 用户下进行. (1) 首先下载 jdk-8u131-linux-x64.rpm (2)将用户切换至 root,在 opt 文件夹下新建 s ...
- radial profiles of mean streamwise velocity at X/D=3
matlab code: load aver_ux_array.dat; load z_array.dat; r=z_array(:,); r=r.' r_j=0.00125; r_nor=r/d; ...
- LA 3029 City Game
LA 3029 求最大子矩阵问题,主要考虑枚举方法,直接枚举肯定是不行的,因为一个大矩阵的子矩阵个数是指数级的,因此应该考虑先进行枚举前的扫描工作. 使用left,right,up数组分别记录从i,j ...
- PAT 1141 PAT Ranking of Institutions
After each PAT, the PAT Center will announce the ranking of institutions based on their students' pe ...
- [ZJOI2008]杀蚂蚁antbuster
[ZJOI2008]杀蚂蚁antbuster 题目 最近,佳佳迷上了一款好玩的小游戏:antbuster.游戏规则非常简单:在一张地图上,左上角是蚂蚁窝,右下角是蛋糕,蚂蚁会源源不断地从窝里爬出来,试 ...
- [luoguP1901] 发射站(单调栈)
传送门 呵呵 ——代码 #include <cstdio> #include <iostream> #define N 1000010 #define LL long long ...
- 阿里maven仓库配置
修改conf文件夹下的settings.xml文件,添加如下镜像配置: <mirrors> <mirror> <id>alimaven</id> < ...
- tyvj2059 元芳看电影
描述 神探狄仁杰电影版首映这天,狄仁杰.李元芳和狄如燕去看电影.由于人实在是太多了,入场的队伍变得十分不整齐,一个人的前面可能会出现并排的好多人.“元芳,这队伍你怎么看?”“大人,卑职看不出这队伍是怎 ...