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宽 ...
随机推荐
- 【CImg】基本像素操作
继openCV之后接触的又一个C++视觉库——短小精干的CImg 刚开始接触的时候真的是..几乎无从下手,网上资料比较少,但发现有一篇非常有用的中文手册:http://wenku.baidu.com/ ...
- Application crashes -程序崩溃原因
Typical errors that result in application crashes include: attempting to read or write memory that i ...
- 【OptiX】第5个示例 递归反射、抗锯齿
运行结果如下: [抗锯齿] 可以看到中间那个竖线的右侧从地面上看有款明显的锯齿,而左边就没有.包括球的反射出来的三角形和地面也有明显的锯齿.那么抗锯齿究竟本例中是怎么做的呢? 首先在采样时,当场景需要 ...
- ThinkPHP---TP拓展之获取IP信息
[概论] (1)简述 在所有网站里,特别是用户管理系统,都喜欢记录用户访问的IP地址.对后期的业务开展有很大的意义,可以通过IP地址的记录访问出国内或全球范围内,哪一块用户比较多. 在后期做产品时,可 ...
- Android table布局开发的一个简单的计算器
结果如图: XML文件如下: <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" ...
- MarkDown语法和使用
MarkDown语法: Markdown在线编辑器 MdEditor Markdown 语法整理大集合2017 MarkDown 数学公式 在Markdown中输入数学公式(MathJax) \(\l ...
- Platform 获取主机系统信息
该模块用来访问平台相关属性. 常见属性和方法 1. import platform(pip install platform) 2.获取操作系统名称及版本号 def get_platform(): ...
- APUE 文件IO
文件 IO 记录书中的重要知识和思考实践部分 Unix 每个文件都对应一个文件描述符(file descriptor),为一个非负整数,一个文件可以有多个fd, 后面所有与文件(设备,套接字等)有关操 ...
- Django DTL模板语法中的判断
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Python pygame库的应用
今天想用pygame库写一个击打外星人飞船的python程序 这个游戏的效果是操纵一个位于屏幕底端的飞船,通过上下左右控制飞船移动方向,按空格发射子弹.游戏中击杀一批飞船后进入下一关卡.每一关卡击打飞 ...