2.操作元素

通过循环来生成tr和td

  <div class="exchange" id="box">1 </div>
var trStr="";
for(var i=0;i<3;i++){
    // 通过循环来生成td的字符串
    var tdStr = "";
    for (var j = 0; j < 3; j++) {
            tdStr += "<td>td里内容</td>";
        // console.log(tdStr);
        //判断行数的奇偶数
        if(i%2==0){
            trStr+="<tr style='background:blue'>"+tdStr+"</tr>";//偶数行就添加背景色
        }else{
            trStr+="<tr>"+tdStr+"</tr>";//奇数行就添加背景色
var tableStr="<table border='1'>"+trStr+"</table>";//生成table
var divEle = document.querySelector(".exchange");//获取div
divEle.innerHTML=tableStr;
3创建dom元素
document.createElement("p")//创建元素
p.innerHTML = "我是p内容";
//注意：innerHTML后面需要接收的是字符串
//appendChild把对象添加到指定的位置
var liEle=document.createElement("li")//创建li
var pEle=document.createElement("p")//创建p
liEle.appendChild(pEle);//把p放在li里面  即<li><p></p></li>
  // 1.innerHTML需要字符串  appendChild需要对象  
  // 2.innerHTML会替换html  appendChild会追加html
4用元素创建表格
var tableEle = document.createElement("table") ; // 创建table只需要一个标签名 
// 通过循环来创建tr，一旦创建完成就会加入到tableEle里面
for(var i=0;i<3;i++){
var trEle = document.createElement("tr");
            if(i%2==0){
                // 索引是偶数的位置把创建的tr添加背景颜色；
                trEle.style.backgroundColor = "blue";
            // 每一行tr就创建了3个td ，总共就创建了9个td
            for(var j=0;j<3;j++){
                // 向td里添加内容
                    var tdEle = document.createElement("td");
                td1.innerText = "内容";
                trEle.appendChild(tdEle);
tableEle.appendChild(trEle); // appendChild会追加
console.log(tableEle);
        // 需要把组装好table放到 body
document.body.appendChild(tableEle);
    sunShine
        
 关注  
私信