使用 javascript 創建時，Div 未顯示在頁面中

Question

您好，當運行 function 時，我的新 div 沒有出現在我的 html 站點中。 它創建了 div 但它不可見。 我是 js 的新手，我們將不勝感激。 請原諒我糟糕的編程技巧。

function newProject(projectName, projectLang, projectDifficulty) {
    let newProjectBox = document.createElement('div'); 
    newProjectBox.className = 'projectbox';
    newProjectBox.innerHTML = 
    `<img src="/projectImages/snake-icon.png" alt="Project">
    <h3 id="projectName">${projectName}</h3>
    <h3 id="projectLang">Project Language: ${projectLang}</h3>
    <h3 id="projectDifficuly">Difficulty: ${projectDifficulty}</h3>`;
};

Answer 1

最后你必須在文檔中使用 append 才能有用

document.body.appendChild("div");

在行中

let newProjectBox = document.createElement('div'); 

在將其轉換為變量之前，您首先必須調用它來創建一個 div。 這個得go之類的。

document.createElement("div");
let newProjectBox = document.createElement("div");

然后你可以繼續你的正常代碼。 最后撥打您的 function。

Answer 2

您需要將新的 div 添加到父 div 中。

例如：

<div id="main"></div>

function newProject(projectName, projectLang, projectDifficulty) {
            let newProjectBox = document.createElement('div'); 
            newProjectBox.className = 'projectbox';
            newProjectBox.innerHTML = 
            `<img src="/projectImages/snake-icon.png" alt="Project">
            <h3 id="projectName">${projectName}</h3>
            <h3 id="projectLang">Project Language: ${projectLang}</h3>
            <h3 id="projectDifficuly">Difficulty: ${projectDifficulty}</h3>`;

            /* here */
            document.getElementById('main').appendChild(newProjectBox);
        };

結果：

<div id="main">
 <div class="projectbox">
   <img src="/projectImages/snake-icon.png" alt="Project">
   <h3 id="projectName">NAME</h3>
   <h3 id="projectLang">Project Language: LANG</h3>
   <h3 id="projectDifficuly">Difficulty: DIFFICULTY</h3>
 </div>
</div>

Answer 3

您的代碼只創建div元素，您必須將它 append 到正文中的任何元素。 例如，您可以嘗試將 append 發送到根主體：

document.body.append(newProjectBox)

完整示例：

function newProject(projectName, projectLang, projectDifficulty) {
    let newProjectBox = document.createElement('div'); 
    newProjectBox.className = 'projectbox';
    newProjectBox.innerHTML = 
    `<img src="/projectImages/snake-icon.png" alt="Project">
    <h3 id="projectName">${projectName}</h3>
    <h3 id="projectLang">Project Language: ${projectLang}</h3>
    <h3 id="projectDifficuly">Difficulty: ${projectDifficulty}</h3>`;
    document.body.append(newProjectBox)
};

如果你有像root之類的容器 id，你需要調整你的代碼，比如：

var target = document.getElementById("root")
target.append(newProjectBox)