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. 小程序接口越过域名和https限制方法

    都知道小程序上线接口需要域名,还需要https,就算是体验版的都是需要的,这样就筛选掉一大批开发者,像我这样只有学生轻量级服务器的学生要开发自己的小程序就很为难,但今天确惊奇的在小程序社区里面找到了用 ...

  2. 木块问题(The Blocks Problem,Uva 101)

    不定长数组:vector vector就是一个不定长数组.不仅如此,它把一些常用操作“封装”在了vector类型内部. 例如,若a是一个vector,可以用a.size( )读取它的大小,a.resi ...

  3. mysql数据库主从操作记录

    master数据库已投入生产一段时间后,做主从复制的操作记录 环境: master库:172.18.237.13slave库:172.18.237.14 mysql版本说明: master:mysql ...

  4. bootstrap-table使用笔记

    服务端分页: //html <div class="container-fluid"> <div style="margin-top:1em" ...

  5. Python 开发面试题

    Python部分 将一个字符串逆序,不能使用反转函数 求从10到100中能被3或5整除的数的和 What is Python? What are the benefits of using Pytho ...

  6. spring与quartz整合实现分布式动态创建,删除,改变执行时间定时任务(mysql数据库)

    背景:因为在项目中用到了定时任务,当时想到了spring的quartz,写完发现费了很大功夫,光是整合就花了一上午,其中最大的问题就是版本问题,项目中用的是spring3.2.8的版本,查阅发现,3. ...

  7. js中复制功能总结

    目前copy主流有四种方式:ZeroClipboard,Clipboard.js,execCommand,setData,clipboardData 概况: ZeroClipboard 就是常说的Fl ...

  8. https://blog.csdn.net/zhi_sheng/article/details/78910082----mybatis写当天 当月的数据 时间段数据

    https://blog.csdn.net/zhi_sheng/article/details/78910082---- mybatis写当天 当月的数据 时间段数据

  9. POJ 1019 数学题

    #include <cstdio> #include <cstring> using namespace std; ]; //sum[i]表示尾数为i的组最大可达到的数字个数 ...

  10. java多线程编程核心技术(一)--多线程技能

    1.进程和线程的概念 1.进程:进程是操作系统的基础,是一次程序的执行,是一个程序及其数据在处理机上顺序执行时所发生的活动,是程序在一个数据集合上运行的过程,他是系统进行资源分配和调度的一个独立单位. ...