Create a div element and give this div element a class attribute

Question

1.00/5 (2 votes)

See more:

1. Create a div element
2. Give this div element a class attribute with a value of "square"
3. append this div element using the appendChild method to the element with the id of "squares-wrapper"

2. Define a function named removeSquare.
This function should remove one element with the class of "square" from the HTML.

What I have tried:

function addSquare(){
let newdiv = document.createElement("div");
newdiv.className="square"
document.getElementsById("squares-wrapper").appendChild(newdiv);

}

function removeSquare(){
let box= getElementsByClassName("square")
box.remove()

Posted 2-May-23 1:28am

adla099

Updated 2-May-23 4:43am

Add a Solution

Comments

Dave Kreskowiak 2-May-23 8:49am

You forgot to ask a question.

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

adla099 · Accepted Answer · 2023-05-02T04:43:00

Solution 2

function addSquare(){
let wrapper=document.getElementById("squares-wrapper");
let newElm= document.createElement("div") ;
newElm.classList.add("square");
wrapper.appendChild(newElm);
}

function removeSquare(){
let erase= document.getElementsByClassName("square")[0]
erase.remove()
}

Posted 2-May-23 4:43am

adla099

Member 15627495 · Accepted Answer · 2023-05-02T01:51:00

as mention in this article :

Element: setAttribute() method - Web APIs | MDN[^]

JavaScript

function ADD_ELM( new_tag, id_target , attr , attr_value ){

newElm = document.createElement(" + new_tag + ") ;

newElm.setAttribute( attr , attr_value ) ;

document.getElementById( id_target ).appendChild( newElm ) ;

}

ADD_ELM( "DIV" , "squares_wrapper" , "class" , "square" ) ; // function ADD using.

About "Let" statement :

'let' comes in JS with the modern JS, and is equal : 'void' myVar. this var is alive for the scope of the declaration.

let A = 2 ;
is same as :
A = 2 ;

// Once out of the scope, this var is delete.

to remove you can do shorter, with an imperative instruction :

function removeSquare(){
Document.getElementsByClassName("square")[0].remove() ; // 0 is the index because an Array of Element could be return, instead of one only 'element'.