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. MFC获取各类指针句柄

    最近有些人在问MFC编程一些要点,有一些句柄的获取.指针的获取是常见的问题,本文将对这些问题做以解释,参考了前人的笔录(见reference),希望能够帮助大家更方便地进行MFC程序开发. 一般我们使 ...

  2. 25款css动画库

    http://www.swiper.com.cn/usage/animate/index.html   //swiper https://cssanimation.io/ http://ianlunn ...

  3. cout 按进制数出

    头文件: #include<iostream> #include<iomanip> //setbase() #include<bitset> //bitset< ...

  4. UVA - 12325 Zombie's Treasure Chest (分类搜索)

    题目: 有一个体积为N的箱子和两种数量无限的宝物.宝物1的体积为S1,价值为V1:宝物2的体积为S2,价值为V2.输入均为32位带符号整数.计算最多能装多大价值的宝物,每种宝物都必须拿非负整数个. 思 ...

  5. 每日命令:(10)cat

    cat命令的用途是连接文件或标准输入并打印.这个命令常用来显示文件内容,或者将几个文件连接起来显示,或者从标准输入读取内容并显示,它常与重定向符号配合使用. 1.命令格式: cat [选项] [文件] ...

  6. http怎么做自动跳转https

    Nginx版本 server { listen       80; server_name  localhost; rewrite ^(.*)$ https://$host$1 permanent; ...

  7. React组件设计技巧

    React组件设计 组件分类 展示组件和容器组件 展示组件 容器组件 关注事物的展示 关注事物如何工作 可能包含展示和容器组件,并且一般会有DOM标签和css样式 可能包含展示和容器组件,并且不会有D ...

  8. SQL函数小记

    写一篇笔记,记录一下常见的sql函数,以备之后的查找需要. 算数函数 abs(num):绝对值函数 mod(被除数,除数):求余函数 round(num,保留小数的位数):四舍五入函数 字符串函数 c ...

  9. Ajax_数据格式_HTML

    [数据格式提要] 1.在服务器端Ajax是一门与语言无关的技术.在业务逻辑层使用何种服务器端语言都可以. 2.从服务器端接收数据的时候,那些数据必须以浏览器能够理解的格式来发送.服务器端的编程语言只能 ...

  10. 【Codeforces 489D】Unbearable Controversy of Being

    [链接] 我是链接,点我呀:) [题意] 让你找到(a,b,c,d)的个数 这4个点之间有4条边有向边 (a,b)(b,c) (a,d)(d,c) 即有两条从a到b的路径,且这两条路径分别经过b和d到 ...