如何在div中插入java脚本函数的元素？

这是我的代码如何在div中插入java脚本函数的元素？

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function myFunction() { 
var year_table = document.createElement("TABLE"); 
    year_table.setAttribute("id", "head_skill_table"); 
    document.body.appendChild(year_table); 

var year_tr = document.createElement("TR"); 
    year_tr.setAttribute("id", "year_tr"); 
    document.getElementById("head_skill_table").appendChild(year_tr); 

    for(i = 2006; i <= 2016; i++) { 
     var year_th = document.createElement("TH"); 
     var year_cell = document.createTextNode(i); 
      year_th.appendChild(year_cell); 
      document.getElementById("year_tr").appendChild(year_th); 
      year_th.style.width = "25vw"; 
      year_th.style.border = "2px dotted #a1a1a1"; 
      year_th.style.borderRadius = "100%"; 
      year_th.style.padding = "1.5% 0.5%"; 

     for(j = 0; j < 4; j++) { 
      var year_hr = document.createElement("TH"); 
       year_hr.innerHTML = '<hr style="border-top: 2px dotted #a1a1a1;">'; 
       document.getElementById("year_tr").appendChild(year_hr); 
       year_hr.style.width = "25vw"; 
      } 
    } 
    var year_th = document.createElement("TH"); 
    var year_cell = document.createTextNode(2017); 
     year_th.appendChild(year_cell); 
     document.getElementById("year_tr").appendChild(year_th); 
     year_th.style.width = "25vw"; 
     year_th.style.border = "2px dotted #a1a1a1"; 
     year_th.style.borderRadius = "100%"; 
     year_th.style.padding = "1.5% 0.5%"; 
} 

</script> 
</head> 
<body > 

<div id="one"> 
<!--Some Content--> 
</div> 
<div id="two"> 
<!--Some Content--> 
</div> 
<div id="three"> 
<!--Some Content--> 
</div> 

<div id="myDiv" style="some css style"> 
<!--Place my table created with javascript function here, so it will inherite the css style--> 
</div> 

<div id="four"> 
<!--Some Content--> 
</div> 
<div id="five"> 
<!--Some Content--> 
</div> 
<div id="six"> 
<!--Some Content--> 
</div> 

</body> 
</html>

现在我想补充我的代码与ID在div =“myDiv”，使得得到由myFunction的（）创建的表将继承myDiv的所有CSS样式（）我尝试了innerHTML，但没有让表格继承myDiv的风格。

来源

2017-02-10 Priyanka

您应该使用CSS样式表。 – SLaks

检查这个小提琴（https://jsfiddle.net/nrgbf14p/1/）：添加div有适用的正确风格。但是一个div不会继承其父代的所有属性（请参阅'border'规则如何应用于匹配的div）。 – ValLeNain

你只需要删除year_table到myDiv中，如下所示。我为myDiv添加了一些样式来使边框变蓝。

<script> 
 
function myFunction() { 
 
var year_table = document.createElement("TABLE"); 
 
    year_table.setAttribute("id", "head_skill_table"); 
 
    var myDiv = document.getElementById("myDiv"); 
 
    myDiv.appendChild(year_table); 
 
// document.body.appendChild(year_table); 
 

 
var year_tr = document.createElement("TR"); 
 
    year_tr.setAttribute("id", "year_tr"); 
 
    document.getElementById("head_skill_table").appendChild(year_tr); 
 

 
    for(i = 2006; i <= 2016; i++) { 
 
     var year_th = document.createElement("TH"); 
 
     var year_cell = document.createTextNode(i); 
 
      year_th.appendChild(year_cell); 
 
      document.getElementById("year_tr").appendChild(year_th); 
 
      year_th.style.width = "25vw"; 
 
      year_th.style.border = "2px dotted #a1a1a1"; 
 
      year_th.style.borderRadius = "100%"; 
 
      year_th.style.padding = "1.5% 0.5%"; 
 

 
     for(j = 0; j < 4; j++) { 
 
      var year_hr = document.createElement("TH"); 
 
       year_hr.innerHTML = '<hr style="border-top: 2px dotted #a1a1a1;">'; 
 
       document.getElementById("year_tr").appendChild(year_hr); 
 
       year_hr.style.width = "25vw"; 
 
      } 
 
    } 
 
    var year_th = document.createElement("TH"); 
 
    var year_cell = document.createTextNode(2017); 
 
     year_th.appendChild(year_cell); 
 
     document.getElementById("year_tr").appendChild(year_th); 
 
     year_th.style.width = "25vw"; 
 
     year_th.style.border = "2px dotted #a1a1a1"; 
 
     year_th.style.borderRadius = "100%"; 
 
     year_th.style.padding = "1.5% 0.5%"; 
 
} 
 

 
</script> 
 

 
<style> 
 
    #myDiv table th { 
 
    border-color:blue !important; 
 
    } 
 
    </style> 
 

 
<div id="one"> 
 
<!--Some Content--> 
 
</div> 
 
<div id="two"> 
 
<!--Some Content--> 
 
</div> 
 
<div id="three"> 
 
<!--Some Content--> 
 
</div> 
 

 
<div id="myDiv" style="some css style"> 
 
<!--Place my table created with javascript function here, so it will inherite the css style--> 
 
</div> 
 

 
<div id="four"> 
 
<!--Some Content--> 
 
</div> 
 
<div id="five"> 
 
<!--Some Content--> 
 
</div> 
 
<div id="six"> 
 
<!--Some Content--> 
 
</div> 
 

 
<script> 
 
    myFunction(); 
 
    </script>

来源

2017-02-10 20:23:30 nixkuroi

使用CSS进行造型。这就是它的设计目的。

div #head_skill_table { 
    /* my style rules */ 
    }

并改变javascript函数接受一个div的ID放置表内，所以它保持灵活性。

function myFunction(tableID) { 
// ... 
}

然后，您可以从您的结构中分离出您的显示。

来源

2017-02-10 20:01:06 TinkerTenorSoftwareGuy

document.getElementById('myDiv').appendChild(year_table);

如果我理解正确，只需在生成表后生成这一行。也不要忘记某个时候或在window.onload像

window.onload = myFunction;

来源

2017-02-10 20:06:43 throwSmartDev

调用你的函数你必须使用id head_skill_table，使风格影响您的代码

#head_skill_table { 
    background:red; 
}

来源

2017-02-10 20:22:05

如何在div中插入java脚本函数的元素？

回答

相关问题