Back

Technologies:

javascriptjavascript
htmlhtml
avatar
Tolerim
a month ago

I am not getting the desired result while using VS code with `document.createElement()` and `appendChild()`.

In my pursuit to learn DOM, I encountered a predicament. Although I used document.createElement() and appendChild() in VS code, I was unable to get the expected output. However, when I tried executing the same code directly in the Chrome browser console, it worked impeccably. Could someone please explain to me why this is happening? Here's the code snippet: 
const newSpanElement = document.createElement("span");
newSpanElement.textContent = " Welcome!";
const mainHeading = document.getElementsByTagName("h1");
mainHeading.appendChild(newSpanElement);
Along with this one: 
const newPara = document.createElement("p");
newPara.textContent = "You are a good person!";
document.body.appendChild(newPara);
I even experimented with .innerHTML and .createTextNode(), but none of these methods provided me with the desired outcome. I would be immensely appreciative if someone could shed light on why this is happening. Thank you in advance for your assistance!
Answers(2)
avatar
Vogi
a month ago
Verified Answer
The reason why your code works in the console but not in VS code is that the console is part of the browser environment and has access to the global scope of the page. In contrast, VS code is an editor that runs on your computer and does not have access to the browser environment. Therefore, you need to make sure that your JavaScript code is running in the browser environment. In your first code snippet, you are trying to append a new span element to an existing h1 element. However, you are using getElementsByTagName() which returns an array of elements with the specified tag name. Therefore, you need to specify which element in the array you want to append the new span element to. For example: 
const newSpanElement = document.createElement("span");
newSpanElement.textContent = " Welcome!";
const mainHeading = document.getElementsByTagName("h1")[0];
mainHeading.appendChild(newSpanElement);
In your second code snippet, you are appending a new paragraph element to the body of the HTML document. This should work as expected. Here's the corrected code: 
const newPara = document.createElement("p");
newPara.textContent = "You are a good person!";
document.body.appendChild(newPara);
I hope this helps! Let me know if you have any other questions.

Sources

`document.createElement()` and `appendChild()` not giving me the ...javascript - appendChild Not Working - Stack Overflowappend VS appendChild - DEV CommunityJavascript appendChild() not working. - Stack Overflowjavascript - appendChild + createElement - Stack OverflowNode: appendChild() method - Web APIs | MDN - Mozilla Developer
avatar
Tolerim
a month ago
When working with the DOM in JavaScript, it is important to make sure that the element you are trying to append to is actually present in the document. In the code snippets provided, the getElementsByTagName method returns an HTMLCollection which is an array-like object, so we need to select the first item of this array using [0] before we can append any content to it. Additionally, it's possible that the code is being executed before the HTML document has finished loading. Make sure your script is included at the end of the HTML document - or alternatively, you can wrap your code in a DOMContentLoaded event listener to ensure that the DOM has loaded before the script is executed. Here is the updated code: 
// Wait for the DOM to finish loading before we try to modify it
document.addEventListener("DOMContentLoaded", function() {
  const newSpanElement = document.createElement("span");
  newSpanElement.textContent = " Welcome!";
  const mainHeading = document.getElementsByTagName("h1")[0];
  mainHeading.appendChild(newSpanElement);

  const newPara = document.createElement("p");
  newPara.textContent = "You are a good person!";
  document.body.appendChild(newPara);
});
Alternatively, you can try moving your script tag to the end of the body tag in your HTML document to ensure that the content has been loaded before your script is executed.
;