FAQ: Javascript and the DOM - Create and Insert Elements

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 (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 (reply) below!

Agree with a comment or answer? Like (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!

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);
1 Like

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

1 Like

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

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.

1 Like

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

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.

1 Like

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?

1 Like

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.

2 Likes

that makes sense. Thanks.

2 Likes

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?

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

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

1 Like

4 posts were split to a new topic: [PENDING] Hint contains an error and the solution code is incomplete

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

codecademy

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?

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

Oa\xaca, Me\xico

Aside

Wyoming

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.

1 Like

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:

59%20PM

and changing to Times Roman works:

50%20PM

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