CODEWITHSUNDEEP
javascriptappendchild
Leon N
Leon N

Reputation: 133

Add element to a div with javascript

I want to add an element (child, div) to a mother-div, that already has one or more children. I made a script for this action but when I execute the script I am not able to manipulate style attributes afterwards. So I assume I did something wrong in my creation-script. I also added a console message (end of the script) and that also indicates there are no style attributes filled in at the new div. So, please could someone indicate what the reason is...

As I am quite new to javascript I assume the reason is quite simple. But although I checked many other questions and solutions, I do not get the proper solution for my issue. I think it should be in appendChild or insertBefore.

function preparevideo(videonaam, titel) {
  // add a div to the video-div
  const nieuwetitel = document.createElement("div");
  // give the new div an id so it will be unique
  nieuwetitel.id = videonaam + '-id';
  // give the div a class for the markup
  nieuwetitel.className = 'page-roel-video-titel';
  // create the text in the div
  const textnode = document.createTextNode(titel);
  // add the textnode to the div
  nieuwetitel.appendChild(textnode);
  // find the element where the new div should be added to  
  let videomodule = document.getElementById(videonaam);
  // and finally add the new div to the video-div, as the first child
  videomodule.insertBefore(nieuwetitel, videomodule.children[0]);

  console.log('-------after adding div------');
  console.log('-------complete style of titleblock------');
  console.log(document.getElementById(videonaam + '-id').style);
  console.log('prepare video afgerond');
}
preparevideo("naam1","Eerste video");
<div id="naam1"></div>

Upvotes: 1

Views: 142

Answers (3)

Asif Jalil
Asif Jalil

Reputation: 762

As you didn't set any style attribute before console.log that's why you didn't get any result. After implementing some style, you can log the the style. Then you will see the difference. Here I added some style before the console.log

function preparevideo(videonaam, titel) {
  // add a div to the video-div
  const nieuwetitel = document.createElement("div");
  // give the new div an id so it will be unique
  nieuwetitel.id = videonaam + '-id';
  // give the div a class for the markup
  nieuwetitel.className = 'page-roel-video-titel';
  // create the text in the div
  const textnode = document.createTextNode(titel);
  // add the textnode to the div
  nieuwetitel.appendChild(textnode);
  // find the element where the new div should be added to  
  let videomodule = document.getElementById(videonaam);
  // and finally add the new div to the video-div, as the first child
  videomodule.insertBefore(nieuwetitel, videomodule.children[0]);

  // Applying style
  document.getElementById(videonaam + '-id').style.backgroundColor = 'red';
  document.getElementById(videonaam + '-id').style.color = 'white'

  console.log('-------after adding div------');
  console.log('-------complete style of titleblock------');
  console.log(document.getElementById(videonaam + '-id').style);
  console.log('prepare video afgerond');
}
preparevideo("naam1","Eerste video");
<div id="naam1"></div>

Upvotes: 0

Aleksei Golubev
Aleksei Golubev

Reputation: 352

The problem is that there is no unique id value for nieuwetitel element generated. When you use getElementById() method you get only first element from DOM.

Upvotes: -1

rehkmansa
rehkmansa

Reputation: 57

You already gave it a class, you can target it in your css and added the needed styles

Upvotes: -1

Related Questions