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添加页面元素的更多相关文章

  1. js实现页面元素随着内容的滚动而滚动

      CreateTime--2017年9月4日16:55:06 Author:Marydon js实现页面元素随着内容的滚动而滚动 分析: CSS样式,使用绝对定位确定好页面元素在屏幕的位置(如:正中 ...

  2. Selenium with Python 005 - 调用js操作页面元素

    WebDriver提供了execute_script()方法来执行JavaScript方法,格式如 driver.execute_script(script,*args) 执行js一般有两种场景,一是 ...

  3. F12修改html进行本地js操作页面元素

    F12修改html进行本地js操作页面元素

  4. js为页面元素添加水印

    近期有需求为页面部分区域添加上水印,通过在网上找到了js为页面添加水印的方法,后来经过自己的改进,可以实现为页面部分元素添加水印,最终效果如下图: 代码如下: function watermark(s ...

  5. js获取页面元素距离浏览器工作区顶端的距离

    先介绍几个属性:(暂时只测了IE和firefox,实际上我工作中用到的最多的是chrome)  网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (javascript)       ...

  6. JS获取页面,元素,窗口和返回页面,元素,窗口的宽高以及滚动值

    jquery获取页面,元素,窗口的宽高以及滚动值 //获取浏览器显示区域(可视区域)的高度 : $(window).height(); //获取浏览器显示区域(可视区域)的宽度 : $(window) ...

  7. js添加删除元素

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  8. JS获取页面元素并修改

    //实现代码如下,非常简单<script> (function(){ var ele = document.getElementsByTagName("ul"); // ...

  9. JS添加DOM元素CSS权重BUG

    修改删除table的时候,比如拆分合并单元格,合并全部TR中的某个TD后在拆分还原,即使直接在td标签中设置了td的高宽属性,当td在css文件中设置为宽度auto的时候,不能显示出TD来,显示TD宽 ...

随机推荐

  1. 安卓app测试之Monkeyrunner

    一.MonkeyRunner简介 MonkeyRunner提供了系列的API ,MonkeyRunner可以完成模拟事件及截图操作 ,分为以下三类: MonkeyRunner:用来连接设备或模拟器的 ...

  2. day19-常用模块IV(re、typing)

    目录 re模块 typing模块 爬取音频 re模块 用来从字符串(文本)中查找特定的东西 1.元字符:有特殊意义的字符 ^ 从开头匹配 import re a = re.findall('^abc' ...

  3. TCP端口状态LISTENING ESTABLISHED CLOSE_WAIT TIME_WAIT SYN_SENT

    TCP状态转移要点 TCP协议规定,对于已经建立的连接,网络双方要进行四次握手才能成功断开连接,如果缺少了其中某个步骤,将会使连接处于假死状态,连接本身占用的资源不 会被释放.网络服务器程序要同时管理 ...

  4. 04JavaScript程序语句

    JavaScript程序语句 2.6程序控制流程 2.6.1选择结构 if <逻辑表达式> 语句 else 语句 if <逻辑表达式> { 语句组 } else { 语句组} ...

  5. Android 项目Log日志输出优化

    概述 Android开发过程中经常需要向控制台输出日志信息,有些人还在用Log.i(tag,msg)的形式或者system.out.println(msg)方式吗?本篇文章对日志信息输出进行优化,以达 ...

  6. docker搭建日志收集系统EFK

    EFK Elasticsearch是一个数据搜索引擎和分布式NoSQL数据库的组合,提过日志的存储和搜索功能. Fluentd是一个消息采集,转化,转发工具,目的是提供中心化的日志服务. Kibana ...

  7. 11servlet接口

    11.servlet接口-2018/07/23 1.servlet 是一个接口,需要导包javax.servlet.Servlet; 第一种编写一个servlet程序的方法 写一个Java类,实现se ...

  8. UVA-227 Puzzle(模拟)

    题目: 题目浏览传送门 题意: 给出一个5*5的方格,里边有一个格子是空的,现在给出一串指令,A->空格向上移动,B->空格向下移动,R->空格向右移动,L->空格向左移动. ...

  9. idea+maven配置log4j详解

    经过上一篇的讲解,知道了实现log4j打印日志依赖的jar包共3个,在pom.xml中加入相关依赖: <!-- 添加log4j日志相关jar包:共3个jar--> <!-- http ...

  10. 52.基于doc value正排索引的聚合内部原理

    主要知识点: 本节没有太懂,以后复习时补上       聚合分析的内部原理是什么????aggs,term,metric avg max,执行一个聚合操作的时候,内部原理是怎样的呢?用了什么样的数据结 ...