This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 6 years ago.
I'm trying to add some elements to the DOM, but the FireBug console keep alerting me for an error saying TypeError: el.appendChild is not a function; el.appendChild(para); So here is the js:
var para = document.createElement("tr");
var node = document.createTextNode(data.filename);
para.appendChild(node);
var el = document.getElementsByClassName("toBeSelected");
el.appendChild(para);
Found some common problems but couldn't find a way to solve mine.
document.getElementsByClassName
^
returns a collection of elements. You need to select an element from the collection before you can append a child to it.
If you know there's exactly one, you could use:
var el = document.getElementsByClassName("toBeSelected")[0];
As it's unclear whether you expect to add nodes to all of the elements with the given class, so I will explicitly assume that is what you expect to do.
elems = document.getElementsByClassName('toBeSelected');
for (i = 0; i < elems.length; i++) {
elem = elems[i];
tr = document.createElement('tr');
tr.textContent = data.filename;
elem.appendChild(tr);
}
This form is quite verbose. If you're using jQuery, then it's much simpler to write:
$('<tr>').text(data.filename).appendTo('.toBeSelected');
Related
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 an answer here:
How can I iterate through an Elements child nodes using Javascript?
(1 answer)
Closed 4 years ago.
So lets say I have an element that contains this:
How would I be able to run through all these children in javascript?
Use querySelectorAll (which can be directly iterated over, unlike the HTMLCollection methods):
document.querySelectorAll('table.table').forEach(table => {
// do something with each table
});
To iterate over tables seems not useful but here it is. Note I am using the class name for your tables above to find each one. If your example had different classes for each table this would not work.
var tables = document.getElementsByClassName("table");
var arr = new Array();
for (i = 0; i < tables .length; i++) {
//do what you want here
}
If you want to work with the rows and cells within a table you might want to refer to this solution.
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:
Select multiple jQuery objects with .add()
(3 answers)
Closed 5 years ago.
Here is my code:
var $btnNone = $('#btn-none');
var $btn1234 = $('#btn-1, #btn-2, #btn-3, #btn-4');
// This selector works fine
var $btnReview1234None = $('#btn-1, #btn-2, #btn-3, #btn-4, #btn-none')
// HOW TO MAKE THIS SELECTOR WORK.
// This selector ignores $btnNone but respects $btn1234.
// This listens only first item in the selector
var $btnReview1234None = $($btn1234, $btnNone);
$btn1234None.click(function(){
alert('Lorem')
});
The issue is because $($btn1234, $btnNone) will be treated as a contextual selector, ie. jQuery will search the DOM to find the $btn1234 element within $btnNone.
To fix this you could provide an array of both elements to the selector:
var $btnReview1234None = $([$btn1234, $btnNone]);
Or you could use add():
var $btnReview1234None = $btn1234.add($btnNone);
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 8 years ago.
I've simple javascript to get it's child element with the getElementsByClassName but it's not working:
var parent = document.getElementsByClassName('parent');
var child = parent.getElementsByClassName('child');
child.style.color='red';
I've tried a lot and searched to get it but some answers with for loop I've found but I wanted to do it without loop. How can I do this?
You can get the complete node list in one step
var children = document.querySelectorAll(".parent .child");
But then you'll have to loop over that node list.
If you are really interested in only the first one, then you can do
document.querySelector(".parent .child").style.color = 'red';
Try this:
var parent = document.getElementsByClassName('parent');
for(var i=0;i<parent.length;i++){
var child = parent[i].getElementsByClassName('child');
for(var j=0;j<child.length;j++){
child[j].style.color='red';
}
}
document.getElementsByClassName() return the collection. So you have to apply indexing or looping.
Multiple elements can be members of the same class. That is the point of classes.
In getElementsByClassName the word elements is plural. It returns a NodeList, not a single Element.
You can treat it much like an array. You have to loop over each of the nodes that it returns or assume that it will only return one match and use [0].