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. HDU_1022_Train Problem I

    Train Problem I Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  2. js获取微信版本号的方法

    微信现在几乎已经普遍在使用,但是微信版本一直在更新,不同的版本有不同的功能,于是了解微信的版本号很重要,以便自己及时更新体验新的功能.那么如何用js获取微信版本号呢? 一.判断微信版本号 ? 1 2 ...

  3. vue-router + axios token登录状态认证

    vue项目中登录状态判断往往基于jwt认证,我们可以采用判断本地是否存在token,及token是否过期或token值错误 1.利用vue-router 钩子函数判断本地是否存在token impor ...

  4. linux 系统 UDP 丢包问题分析思路

    转自:http://cizixs.com/2018/01/13/linux-udp-packet-drop-debug?hmsr=toutiao.io&utm_medium=toutiao.i ...

  5. 重置默认样式 css reset

    html { overflow-x:auto; overflow-y:scroll; } body, dl, dt, dd, ul, ol, li, pre, form, fieldset, inpu ...

  6. 初识 MyBatis

    框架技术 使用框架构建项目,当确定使用哪个技术框架后,就已经有了一个 “半成品”,然后在这个半成品上填上内容,完成任务需求. 框架技术的优点: (1)不用再考虑公共问题,框架已经帮我们做好了. (2) ...

  7. react----父子组件之间的参数传递

    1.父组件向子组件传递参数 //父组件 import React from 'react'; import './header.css' import ComponentChild from './h ...

  8. CTSC2018 Day2T1 Juice混合果汁

    [题解] 在考场上A掉的题. 把美味度排个序,然后按照价格p为权值建立主席树,把每个果汁按照拍好的顺序添加进去.主席树上维护总升数cnt以及总价格sum.对于每个询问,我们二分一个美味值,check的 ...

  9. 【Codeforces 339C】Xenia and Weights

    [链接] 我是链接,点我呀:) [题意] 在天平上放砝码 你要在左边放一下然后到右边放一下 一直重复这样放m次 每次你放在其中一边都要让另外一边的重量比你少 你可以用1~10中的某些砝码 问你要怎样放 ...

  10. vb 运行ppt示例代码

    来源:http://support.microsoft.com/kb/222929 通过使用 PowerPoint 中的自动运行功能,您可以以编程方式打印.显示幻灯片及执行以交互式执行的大多数事情.按 ...