使用javascript創建時，Div未顯示在頁面中-有解無憂

您好，當函式運行時，我的新 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>`;
};

uj5u.com熱心網友回復：

最后，您必須將其附加到檔案中才能有用

document.body.appendChild("div");

在行中

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

在將其轉換為變數之前，您首先必須呼叫它來創建一個 div。這必須像。

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

然后你可以繼續你的正常代碼。最后呼叫你的函式。

uj5u.com熱心網友回復：

您需要在父 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>

uj5u.com熱心網友回復：

您的代碼僅創建div元素，您必須將其附加到正文中的任何元素。例如，您可以嘗試將其附加到根正文：

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="使用 javascript 創建時，Div 未顯示在頁面中">
    <h3 id="projectName">${projectName}</h3>
    <h3 id="projectLang">Project Language: ${projectLang}</h3>
    <h3 id="projectDifficuly">Difficulty: ${projectDifficulty}</h3>`;
    document.body.append(newProjectBox)
};

如果您有類似容器 ID 之類的root東西，則需要調整代碼，例如：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/425417.html

標籤：javascript html dom

上一篇：使用JavaScript如何獲取填充/邊距設定以始終檢索CSS集%而不是px大小

下一篇：每次單擊按鈕時如何添加新的I項