How to add a class to an HTML element via Javascript. In my case, I need to add a class to the H1 element below

Asked

Viewed 2,906 times

2

I need to add a class to the H1 element 

  var div = document.createElement("div");
  var h1 = document.createElement("h1");
  var p = document.createElement("p");
  h1.textContent = "Me Ajuda";
  p.textContent = "Preciso adicionar uma classe";
  div.appendChild(h1);
  div.appendChild(p);
  console.log(div);
javascript html classes dom elements

  • If any answer has solved your problem be sure to mark it as accepted. See how and why in https://pt.meta.stackoverflow.com/questions/1078/como-e-por-que-aceitar-uma-resposta/1079#1079

2 answers

1

// Buscar elemento pai
var elemento_pai = document.body;

 var div = document.createElement("div");
  var h1 = document.createElement("h1");
  var p = document.createElement("p");
  h1.textContent = "Te ajudei! :)";
  p.textContent = "Adicionei uma classe a tag h1";
  div.appendChild(h1);
  div.appendChild(p);
  
  h1.classList.add("classH1");
  
  elemento_pai.appendChild(div);
  
.classH1
{
color:red;
}
<body></body>

classList

To add one or more classes to an HTML element, simply select it and call the classList.add method, passing a String as argument. It is interesting to note that we can add multiple classes at once. To do this, enter the names of the classes you want to add separated by a comma. Example: h1.classList.add( 'classH1', 'class2', 'class3' );

// Buscar elemento pai
var elemento_pai = document.body;

 var div = document.createElement("div");
  var h1 = document.createElement("h1");
  var p = document.createElement("p");
  h1.textContent = "Te ajudei! :)";
  p.textContent = "Adicionei várias classes a tag h1";
  div.appendChild(h1);
  div.appendChild(p);
  
  h1.classList.add( 'classH1', 'class2', 'class3' )
  
  elemento_pai.appendChild(div);
  
.classH1
{
color:red;
}
.class2
{
font-size:12px;
}
.class3
{
letter-spacing : 6px;
}
<body></body>

compatibilidade

For more detailed (compatibility) - Can I use

0

Edited

Just replace "your-class" with the name of your class. See the example below:

var div = document.createElement("div");
  var h1 = document.createElement("h1");
  var p = document.createElement("p");
  h1.classList.add("sua-class");
  h1.textContent = "Me Ajuda";
  p.textContent = "Preciso adicionar uma classe";
  div.appendChild(h1);
  div.appendChild(p);
  console.log(div);

Explaining the use of classList:

The classList property returns the (s) name(s) of the class of an element, as a Domtokenlist object.

This property is useful for adding, removing, and switching CSS classes in an element.

The classList property is read-only, however you can modify it using add() methods and remove().

Refference: w3schools

  • What is the "classList for"?

  • The classList property returns the (s) name(s) of the class of an element, as a Domtokenlist object. This property is useful for adding, removing, and alternating CSS classes in an element. The classList property is read-only, however, you can modify it using add() and remove() methods. Refference: https://www.w3schools.com/jsref/prop_element_classlist.asp

  • @Your good edit answer and join an explanation!

Browser other questions tagged javascript html classes dom elements

You are not signed in. Login or sign up in order to post.