This question already has answers here:
how to append a css class to an element by javascript?
(7 answers)
How can I add a class to a DOM element in JavaScript?
(12 answers)
Closed 1 year ago.
let example = document.createElement("p");
and now I want to add a new class to the p (<p>) that I just created.
Use the classList and id properties of the element.
let example = document.createElement("p");
example.id = "newid";
example.classList.add("newclass");
You can try it this way:
// create node
const node = document.createElement('p');
// add id
node.setAttribute('id','new_id');
// add class
node.setAttribute('class', 'new-class');
Related
This question already has answers here:
How can I change an element's class with JavaScript?
(33 answers)
Closed 2 years ago.
I dynamically created various images and other elements within various div elements and assigned a class to them, like:
divOM = document.getElementById('omain');
kd = document.createElement('img');
kd.src = 'pics/k0.jpg';
kd.class = 'mww';
divOM.appendChild(kd);
This works well – the debugger shows the desired result (# children with class ‘mww’). I have the (maybe naïve) hope that
wlist = document.getElementsByClassName('mww')
gives me all elements which have class=’mww’, but unfortunately it doesn’t. The debugger shows length:0 for wlist!?? Is it possible that document.getElementsByClassName doesn’t work for dynamically created elements?
Should be .className, not .class.
class is a reserved word in JavaScript.
Or use the Class List API:
kd.classList.add('mww');
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 2 years ago.
so hello i am trying to add class that for element that passes all selectors
this is my current code
document.querySelectorAll('.inner p .align_center').parentNode.classList.add('center_text')
which uhh should work, i am trying to translate this jquery code
$(".inner p .align_center").parent().addClass('center_text')
but i get .parentNode is undefined in the console why? i selected child of p with class of .alignt-center and i want to add class to that p element, or is there easier way of doing the same thing? what am i doing wrong
var a = document.querySelectorAll('.inner p .align_center');
for(var i = 0; i < a.length; i++) {
a[i].parentNode.classList.add('center_text');
}
just had to treat querySelectorAll as a array instead of single element
This question already has answers here:
How do I clear the content of a div using JavaScript? [closed]
(2 answers)
Closed 2 years ago.
document.getElementById('test').innerHTML = '<h1>Hello World</h1>';
Is there anyway that I can remove everything the code above put between two HTML tags?
I gather you want to remove the text between the <h1> and the </h1>. Simple:
const test = document.getElementById('test');
const child = test.firstChild;
child.innerHTML = "";
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 5 years ago.
var
nInput = document.createElement('input'),
clsinput = document.getElementsByTagName('input');
clsinput.setAttribute('class','new');
var nInput = document.createElement('input'),
clsinput = document.getElementsByTagName('input');
clsinput.setAttribute('class','new');
getElementsByTagName returns an array. You are trying to set an attribute to that returned array. You have to iterate that array and set attribute.
Oh wait, you don't need that middle line at all. You created an input element in first line, just use that and set attribute to it
var nInput = document.createElement('input'),
nInput.setAttribute('class','new');
This question already has answers here:
How can I change an element's class with JavaScript?
(33 answers)
Closed 7 years ago.
I am creating input tag with it's attributes by clicking on list item. Type, name and id are created successfully but it's not generating the class attribute.
var createInput = document.createElement("input");
createInput.type = "text";
createInput.name = text1;
createInput.id = text1;
createInput.class = "abc";
The class property of a DOM Element is actually called className:
createInput.className = "abc";
Check out your browser's Debug Console (F12); it has auto-completion, so you can see what properties exist.