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‘);