如何在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腳本函數的元素？

回答

相關問題