FAQ: Javascript and the DOM - Create and Insert Elements

[wiki-bot]

This community-built FAQ covers the " Create and Insert Elements" exercise from the lesson “Javascript and the DOM”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

FAQs on the exercise _ Create and Insert Elements_

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply () below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply () below!

Agree with a comment or answer? Like () to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

[mikegr]

Okay, i cannot see why we have to assign a new id for our list element in this exercise,

Assign the new element an id of "oaxaca" by using the .id property on the new variable.

since we are adding another list child at the end of the existing id element ‘more-destinations’ with:

document.getElementById('more-destinations').appendChild(list);

[janneslohmeijer]

Because assigning an Id will make it easier to manipulate in the javascript. You will need to call for this Id later on in the assignments ;).

[mikegr]

Aha. Is it considered a common practice to do that, whether we may or may not need to call the id in the future?

[janneslohmeijer]

I am not sure if it is, but I would. It improves readability, and it will make it more convenient in the event that you do would like to call it in the future.

[bomafiber]

Hi,

The question (1) asks to assign an “id” to the new element created, but the “Solution” provided (below) after question (2) does not feature an “id” . I thought the new element was to be added to an existing list?

=======================================================
let newDestination = document.createElement(“li”);
newDestination.innerHTML = “Oaxaca, Mexico”;
document.getElementById(“more-destinations”).appendChild(newDestination);

[mtf]

@bomafiber

document.getElementById(“more-destinations”).

Is there an OL or UL element in the HTML with id="more-destinations”? That’s what this line is querying. If found, the LI child node is appended to it.

[drcasmithgmail.com]

I don’t understand why we have to go through all this code. Why can’t we just go back into HTML and add to the list?

[mtf]

The purpose of script is so we can interact with the user, almost directly. During a session we can hardly be expected to edit the file and upload a revised version for their exclusive use.

[drcasmithgmail.com]

that makes sense. Thanks.

[wvmtnboy]

Whenever they have you create an id for the new element, it throws an error.

let newDestination = document.createElement(‘li’);
newDestination.id(‘oaxaca’);
newDestination.innerHTML = “Oaxaca, Mexico”;

document.getElementById(“more-destinations”).appendChild(newDestination);

that fails.

newDestination = document.createElement(‘li’);
newDestination.innerHTML = “Oaxaca, Mexico”;
document.getElementById(“more-destinations”).appendChild(newDestination);

This passes.

why?

[mtf]

@wvmtnboy

newDestination.id(‘oaxaca’);

This doesn’t look right. Should it be an assignment?

[wvmtnboy]

You are correct. newDestination.id = “oaxaca”;

[marcia.247]

I can’t get the text I added to the list to display properly. It looks like this:

I tried refreshing Chrome. My js looks like yhis:

let listItem = document.createElement('li');
listItem.id = "oaxaca";
listItem.innerHTML = "Oaxaca, Mexico";
document.getElementById("more-destinations").appendChild(listItem);

Anyone know what causes this?

[mtf]

That’s a bit of weirdness. What happens if you escape the x's?

Oa\xaca, Me\xico

Aside

Wyoming

[marcia.247]

Same issue with escaping the x. I’m glad you noticed Wyoming missing the y Now I notice all the y’s are missing! I put the index.html in a text file and opened it in Safari (everything displays) and Chrome (won’t display y, like skscraper). So it’s not the JavaScript at least.

[marcia.247]

In case anyone else has this issue …

On this lesson there doesn’t seem to be a style.css (that I could edit). So the font is the standard font which Chrome by default uses Times. This can be changed in the Chrome preferences (search for font).
Default (Times) in Chrome Prefs:

and changing to Times Roman works:

Don’t know if this is a Mac issue or something specific to my Mac (font conflict or something).

[helomike]

I developed and redeveloped the code 8 different ways, adding stuff, taking stuff out, rearranging things, changing the HTML, renaming stuff…finally decided to just have the answer GIVEN to me and could not, for the life of me, figure out why it told me I was wrong over and over again.

[core5678643024]

Is there a practical difference between using the two following structures (the second one is the one proposed in the exercise)?

document.getElementById('more-destinations').innerHTML += '<li id="oaxaca">Oaxaca, Mexico</li>'

let newDestination = document.createElement('li')
newDestination.id = 'oaxaca'
newDestination.innerHTML = 'Oaxaca, Mexico'
document.getElementById('more-destinations').appendChild(newDestination)