Div is not showing up in page when created with javascript-CodePudding

Hello my new div is not appearing in my html site when the function is ran. It creates the div but its not visible. Im new to js and any help will be appreciated. Excuse my bad programming skills.

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>`;
};

CodePudding user response：

in the end you have to append this in the document to be useful

document.body.appendChild("div");

in the line

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

you first have to call this to create a div before converting it into a variable. This has to go like.

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

then you can continue your normal code. and finally call your function.

CodePudding user response：

you need to add your new div inside a parent div.

for example:

<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);
        };

result:

<div id="main">
 <div >
   <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>

CodePudding user response：

Your code only create div element and you have to append it to any element within the body. For example you can try to append it to the root body:

document.body.append(newProjectBox)

Full example:

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)
};

If you have a container id like root or something, you need to adjust your code like:

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