zoukankan      html  css  js  c++  java
  • 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');
  • 相关阅读:
    KMP
    图论知识,博客
    POJ 2318/2398 叉积性质
    CF821 E. Okabe and El Psy Kongroo 矩阵快速幂
    CF821 D. Okabe and City 图 最短路
    CF821 C. Okabe and Boxes 栈模拟
    CF821 A. Okabe and Future Gadget Laboratory 水
    Atcoder arc077 D
    Atcoder #017 agc017 D.Game on Tree 树上NIM 博弈
    Atcoder #017 agc017 B.Moderate Differences 思维
  • 原文地址:https://www.cnblogs.com/the-wang/p/7753429.html
Copyright © 2011-2022 走看看