使用 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)