使用函數參數創建元素，Javascript

首次問題提問者，對我來說很容易。我想我已經徹底瀏覽了Stack，以便不再問一個重複的問題。使用函數參數創建元素，Javascript

我有一個功能。

function createDivs(num) { 
    for(let inc = 0; inc < num; inc++) { 
    let div = document.createElement('div'), 
     tab_content = document.getElementsByClassName('tab-content'); 

     div.className = 'classname'; 
     div.id = `number-${inc}`; 
     div.innerHTML = 'did it work?'; 
     tab_content.innerHTML = div; 
    } 
}

凡HTML只是簡單地

<div class="tab-content"> 
    <script> 
     createDivs(4); 
    </script> 
</div>

我嘗試過其他方法，如

let tab_content = document.getElementsByClassName('tab-content'); 

tab_content.innerHTML = '<div class="classname" id=`number-${inc}`>did it work?</div>';

以及與''""和``那沒噸其他變化既不工作也不工作。

我也試過tab_content.appendChild(div);，那也沒用。

實際上，這是我的實際代碼的降級，因爲我創建了大量需要它們的元素，但我甚至無法使這一點工作。如果我刪除for循環，它甚至不起作用。另外我也看到了這個post，所以爲什麼我嘗試了appendChild，但是這也沒有奏效。

來源

2017-04-14 Raults

tab_content是一個數組，不是單個元素; innerHTML接受一個字符串，而不是一個元素;幾個變量正在全局範圍內聲明 – Semicolon

'getElementsByClassName'返回一個nodeList，它沒有innerHTML屬性。您需要選擇從列表中的一個節點，或者遍歷每個節點，然後設置的innerHTML – mhodges

像你想不要設置的innerHTML在我看來，實際上追加幾個子節點。除此之外，代碼中存在一些錯誤（getElementsByClassName）會返回一個類似數組的對象，而不僅僅是一個對象，所以您需要選擇一個來添加您的div。

此外，您在循環inc不是我叫你我的變量，所以它實際上並沒有增加循環。看看下面的重寫代碼，看看它是否符合你的要求。

function createDivs(num) { 
 
    for(let inc = 0; inc < num; inc++) { 
 
    let div = document.createElement('div'), 
 
     tab_content = document.getElementsByClassName('tab-content'); 
 

 
     div.className = 'classname'; 
 
     div.id = `number-${inc}`; 
 
     div.innerHTML = 'did it work?'; 
 
     tab_content[0].appendChild(div); 
 
    } 
 
} 
 
(function(){createDivs(4)})()

<div class="tab-content"> 
 

 
</div>

來源

2017-04-14 20:15:54

呀，我++是一個錯字，我們對此深感抱歉^ __ ^」實際的代碼使用INC++我固定它。雖然沒有嘗試過你的建議，但我會盡快回復你！ – Raults

您的代碼中有一些拼寫錯誤。在你的循環中使用i++而不是inc++。不以數組的形式訪問tab_content並使用innerHtml而不是appendChild。固定代碼如下。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <script type="text/javascript"> 
 
     function createDivs(num) { 
 
      for(let inc = 0; inc < num; inc++) { 
 
      let div = document.createElement('div'), 
 
       tab_content = document.getElementsByClassName('tab-content')[0]; 
 

 
       div.className = 'classname'; 
 
       div.id = `number-${inc}`; 
 
       div.innerHTML = 'did it work?'; 
 
       tab_content.appendChild(div); 
 
      } 
 
     } 
 
    </script> 
 
</head> 
 
<body> 
 
<div class="tab-content"> 
 
    <script> 
 
     createDivs(4); 
 
    </script> 
 
</div> 
 
</body> 
 
</html>

來源

2017-04-14 20:14:34 gforce301

呀，我++是一個錯字，我們對此深感抱歉^ __ ^」實際的代碼使用INC++我固定它。沒有嘗試過你認爲什麼尚未雖然，所以我會會盡快回復您！ – Raults

您for循環不會增加它的控制變量。將其更改爲

for(let inc = 0; inc < num; inc++) {

和getElementsByClassName返回類似於對象的數組，而不是單個元素。所以你需要將它改爲

tab_content = document.getElementsByClassName('tab-content')[0];

來源

2017-04-14 20:17:46

使用函數參數創建元素，Javascript

回答

相關問題