i am new to JSDOM parser.
I have the following:
<div id='mydiv'>
<ul>
<li><a title='a'>TextA</a></li>
<li><a title='b'>TextB</a></li>
<li><a title='c'>TextC</a></li>
<li><a title='d'>TextD</a></li>
</ul>
</div>
I am using the following code but not able to get the text 'TextA', 'TextB', 'TextC', 'TextD'
const categoryDiv = dom.window.document.querySelectorAll('#mydiv > ul > li')
.forEach(item => {
console.log('item', item.getElement('a')); //not sure how to continue from here
});
})
This could be as simple as:
let targets = document.querySelectorAll('#mydiv > ul > li a');
for (let target of targets) {
console.log(target.text);
}
Simply modify your original code with getElementsByTagName and innerHTML:
const categoryDiv = dom.window.document.querySelectorAll('#mydiv > ul > li')
.forEach(item => {
console.log('item -- ' + item.getElementsByTagName('a')[0].innerHTML);
});
})
const categoryDiv = dom.window.document.querySelectorAll('#mydiv > ul > li')
After this first step you have a NodeList with the 4 list elements. With
console.dir(categoryDiv[0])
you can log the first list object to the console and see and expect all its properties. There are various ways to access the enclosed anchor tags. For example
.children => HTML Collection
.childNodes => NodeList
.getElementsByTagName('a') => HTML Collection
.querySelector('a') => href element
Only the last option gives you the link element directly, with the first three you have to select the first element in the selection to get to the link
For then accessing the text of the link there are again two options
.innerHTML
.textContent
In this case it doesn't matter which to choose because both give you the Text inside the link tags, if called on the link.
If called on the list element it would look like this
listElem.outerHTML // <li><a title="a">TextA</a></li>
listElem.innerHTML // <a title="a">TextA</a>
listElem.textContent // TextA
Sooo you actually don't have to access the link element. Simply call directly .textContent on the list items
Lastly you want to use .map instead of .forEach since .forEach only iterates, but doesn't return anything. The NodeList directly is not iterable with .map but can be easily converted with the spread operator
So all together for example like this
const categoryDiv = [...document.querySelectorAll('#mydiv > ul > li')]
.map(listItem => listItem.textContent)
console.log(categoryDiv) // ['TextA', 'TextB', 'TextC', 'TextD']
or this
const categoryDiv = Array.from(document.querySelectorAll('#mydiv > ul > li'), listItem => listItem.textContent)
Or a very fast way without even iterating would be
document.querySelector('#mydiv ul')
.textContent // 'TextA TextB TextC TextD'
.split(' ') // ['TextA', 'TextB', 'TextC', 'TextD']
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 4 years ago.
I have a problem using getElementsByClassName. When clicking on the add button, it appears on the list with the name undefined and not the value "hello". What am I doing wrong?
CODE:
function addItem(){
var ul = document.getElementById("dynamic-list");
var candidate = document.getElementsByClassName("candidate");
var li = document.createElement("li");
li.setAttribute('class',candidate.value);
li.appendChild(document.createTextNode(candidate.value));
ul.appendChild(li);
}
function removeItem(){
var ul = document.getElementById("dynamic-list");
var candidate = document.getElementsByClassName("candidate");
var item = document.getElementsByClassName(candidate.value);
ul.removeChild(item);
}
<ul id="dynamic-list"></ul>
<button type="submit" class="item" value="hello" onclick="addItem()">ADD</button>
<button onclick="removeItem()">remove item</button>
The problem is that you try to get the value of an unexisting DOM-element candidate. The possible solution could be to add an id-attribute to the button ADD and get this element in your function:
function addItem() {
var ul = document.getElementById("dynamic-list");
var candidate = document.getElementById("item");
var li = document.createElement("li");
li.setAttribute('class', candidate.value);
li.appendChild(document.createTextNode(candidate.value));
ul.appendChild(li);
}
<ul id="dynamic-list"></ul>
<button type="submit" class="item" id="item" value="hello" onclick="addItem()">ADD</button>
<button onclick="removeItem()">remove item</button>
The primary issue with your code is that the class name candidate does not exist anywhere in your HTML. If your goal is to reference the "ADD" button with this class, then you either need to change its class to candidate in your HTML, or change your JS to reference its actual class, item.
Furthermore, getElementsByClassName returns, as its name suggests, a NodeList of multiple elements, rather than a single element. This means that you'll need to select a single element from that list upon which to act; your code, in contrast, treats this method as though it returned only a single element to be acted upon directly (i.e., a Node instead of a NodeList). For your addItem function, this change is trivial; there's only one element with the item class, so simply select the first element of the NodeList (i.e., element 0). For the removeItem function, assuming you want to remove the most recently-added nodes first (LIFO-style), you'll need to remove the last element in the NodeList (if one exists) from the DOM. See the updated snippet below for all of these changes and some explanatory comments:
function addItem(){
var ul = document.getElementById("dynamic-list");
// We know that the "candidate" is always the first—and only—element with the class name "item"
var candidate = document.getElementsByClassName("item")[0];
var li = document.createElement("li");
li.setAttribute('class',candidate.value);
li.appendChild(document.createTextNode(candidate.value));
ul.appendChild(li);
}
function removeItem(){
var ul = document.getElementById("dynamic-list");
// We know that the "candidate" is always the first—and only—element with the class name "item"
var candidate = document.getElementsByClassName("item")[0];
// The "items" variable is introduced to hold the list of all added ".hello" elements, the last of which we will remove
var items = document.getElementsByClassName(candidate.value);
// Safety check: it's possible that there are no more ".hello" elements remaining, in which case there's nothing to remove
if (items.length > 0) {
// Access the last element of the NodeList and remove it from the DOM
var item = items[items.length - 1];
ul.removeChild(item);
}
}
<ul id="dynamic-list"></ul>
<button type="submit" class="item" value="hello" onclick="addItem()">ADD</button>
<button onclick="removeItem()">remove item</button>
I have the following function and I am trying to figure out a better way to append multiple items using appendChild().
When the user clicks on Add, each item should look like this:
<li>
<input type="checkbox">
<label>Content typed by the user</label>
<input type="text">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
</li>
and I have this function to add these elements:
function addNewItem(listElement, itemInput) {
var listItem = document.createElement("li");
var listItemCheckbox = document.createElement("input");
var listItemLabel = document.createElement("label");
var editableInput = document.createElement("input");
var editButton = document.createElement("button");
var deleteButton = document.createElement("button");
// define types
listItemCheckbox.type = "checkbox";
editableInput.type = "text";
// define content and class for buttons
editButton.innerText = "Edit";
editButton.className = "edit";
deleteButton.innerText = "Delete";
deleteButton.className = "delete";
listItemLabel.innerText = itemText.value;
// appendChild() - append these items to the li
listElement.appendChild(listItem);
listItem.appendChild(listItemCheckbox);
listItem.appendChild(listItemLabel);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);
if (itemText.value.length > 0) {
itemText.value = "";
inputFocus(itemText);
}
}
But you can notice that I am repeating three times the appendChild() for listItem. Is it possible to add multiple items to the appendChild() ?
You can do it with DocumentFragment.
var documentFragment = document.createDocumentFragment();
documentFragment.appendChild(listItem);
listItem.appendChild(listItemCheckbox);
listItem.appendChild(listItemLabel);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);
listElement.appendChild(documentFragment);
DocumentFragments allow developers to place child elements onto an
arbitrary node-like parent, allowing for node-like interactions
without a true root node. Doing so allows developers to produce
structure without doing so within the visible DOM
You can use the append method in JavaScript.
This is similar to jQuery's append method but it doesnot support IE and Edge.
You can change this code
listElement.appendChild(listItem);
listItem.appendChild(listItemCheckbox);
listItem.appendChild(listItemLabel);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);
to
listElement.append(listItem,listItemCheckbox,listItemLabel,editButton,deleteButton);
Personally, I don't see why you would do this.
But if you really need to replace all the appendChild() with one statement, you can assign the outerHTML of the created elements to the innerHTML of the li element.
You just need to replace the following:
listElement.appendChild(listItem);
listItem.appendChild(listItemCheckbox);
listItem.appendChild(listItemLabel);
listItem.appendChild(editButton);
listItem.appendChild(deleteButton);
With the following:
listItem.innerHTML+= listItemCheckbox.outerHTML + listItemLabel.outerHTML + editButton.outerHTML + deleteButton.outerHTML;
listElement.appendChild(listItem);
Explanation:
The outerHTML attribute of the element DOM interface gets the serialized HTML fragment describing the element including its descendants. So assigning the outerHTML of the created elements to the innerHTML of the li element is similar to appending them to it.
Merging the answers by #Atrahasis and #Slavik:
if (Node.prototype.appendChildren === undefined) {
Node.prototype.appendChildren = function() {
let children = [...arguments];
if (
children.length == 1 &&
Object.prototype.toString.call(children[0]) === "[object Array]"
) {
children = children[0];
}
const documentFragment = document.createDocumentFragment();
children.forEach(c => documentFragment.appendChild(c));
this.appendChild(documentFragment);
};
}
This accepts children as multiple arguments, or as a single array argument:
foo.appendChildren(bar1, bar2, bar3);
bar.appendChildren([bar1, bar2, bar3]);
Update – June 2020
Most all current browsers support append and the "spread operator" now.
The calls above can be re-written as:
foo.append(bar1, bar2, bar3);
bar.append(...[bar1, bar2, bar3]);
Let's try this:
let parentNode = document.createElement('div');
parentNode.append(...[
document.createElement('div'),
document.createElement('div'),
document.createElement('div'),
document.createElement('div'),
document.createElement('div')
]);
console.log(parentNode);
You need to append several children ? Just make it plural with appendChildren !
First things first :
HTMLLIElement.prototype.appendChildren = function () {
for ( var i = 0 ; i < arguments.length ; i++ )
this.appendChild( arguments[ i ] );
};
Then for any list element :
listElement.appendChildren( a, b, c, ... );
//check :
listElement.childNodes;//a, b, c, ...
Works with every element that has the appendChild method of course ! Like HTMLDivElement.
You can use createContextualFragment, it return a documentFragment created from a string.
It is perfect if you have to build and append more than one Nodes to an existing Element all together, because you can add it all without the cons of innerHTML
https://developer.mozilla.org/en-US/docs/Web/API/Range/createContextualFragment
// ...
var listItem = document.createElement("li");
var documentFragment = document.createRange().createContextualFragment(`
<input type="checkbox">
<label>Content typed by the user</label>
<input type="text">
<button class="edit">Edit</button>
<button class="delete">Delete</button>
`)
listItem.appendChild(documentFragment)
// ...
You could just group the elements into a single innerHTML group like this:
let node = document.createElement('li');
node.innerHTML = '<input type="checkbox"><label>Content typed by the user</label> <input type="text"><button class="edit">Edit</button><button class="delete">Delete</button>';
document.getElementById('orderedList').appendChild(node);
then appendChild() is only used once.
It's possible to write your own function if you use the built in arguments object
function appendMultipleNodes(){
var args = [].slice.call(arguments);
for (var x = 1; x < args.length; x++){
args[0].appendChild(args[x])
}
return args[0]
}
Then you would call the function as such:
appendMultipleNodes(parent, nodeOne, nodeTwo, nodeThree)
Why isn't anybody mentioning the element.append() function ?!
you can simply use it to append multiple items respectively as so:
listItem.append(listItemCheckbox, listItemLabel, editButton, deleteButton);
This is a quick fix
document.querySelector("#parentid .parenClass").insertAdjacentHTML('afterend', yourChildElement.outerHTML);
Guys I really recommend you to use this one.
[listItemCheckbox, listItemLabel, editButton, deleteButton]
.forEach((item) => listItem.appendChild(item));
Since you can't append multiple children at once. I think this one looks better.
Also here's a helper function that uses the fragment technique as introduced in the #Slavik's answer and merges it with DOMParser API:
function createHtmlFromString(stringHtml) {
const parser = new DOMParser();
const htmlFragment = document.createDocumentFragment();
const children = parser.parseFromString(stringHtml, "text/html").body
.children;
htmlFragment.replaceChildren(...children);
return htmlFragment;
}
Now to append multiple children with this, you can make the code much more readable and brief, e.g.:
const htmlFragment = createHtmlFromString(`<div class="info">
<span></span>
<h2></h2>
<p></p>
<button></button>
</div>
<div class="cover">
<img />
</div>
`);
Here's also a working example of these used in action: example link.
Note1: You could add text content in the above tags too and it works, but if it's data from user (or fetched from API), you'd better not trust it for better security. Instead, first make the fragment using the above function and then do something like this:
htmlFragment.querySelector(".info > span").textContent = game.name;
Note2: Don't use innerHTML to insert HTML, it is unsecure.
Great way to dynamically add elements to a webpage. This function takes 3 arguments, 1 is optional. The wrapper will wrap the parent element and it's elements inside another element. Useful when creating tables dynamically.
function append(parent, child, wrapper="") {
if (typeof child == 'object' && child.length > 1) {
child.forEach(c => {
parent.appendChild(c);
});
} else {
parent.appendChild(child);
}
if (typeof wrapper == 'object') {
wrapper.appendChild(parent);
}
}
I would like to add that if you want to add some variability to your html, you can also add variables like this:
let node = document.createElement('div');
node.classList.add("some-class");
node.innerHTML = `<div class="list">
<div class="title">${myObject.title}</div>
<div class="subtitle">${myObject.subtitle}
</div>`;
I have a lot of <ul> list and try to get from every first li of this list the text.
the markup is simple like:
<ul>
<li>abc</li>
<li>def</li>
<li>ghi</li>
</ul>
and so on.
my jQuery attempt is:
var elems = $('ul'); // returns a nodeList
var arr = jQuery.makeArray(elems);
arr.reverse(); // use an Array method on list of dom elements
for( var i=0; i < elems.length; i++) {
console.log($(this).find('li:lt(1)').text());
}
But I have a mistake in the for loop with $(this). I don't know how to get the first text of ul number 1 or 3 if i don't use $(this).
So how can point it correctly in the for loop?
.each will give you this.
$('ul').each(function() {
console.log($(this).find('li').eq(0).text());
})
Alternative sytax using :first instead of :eq(0)
$('ul').each(function() {
console.log($(this).find('li:first').text());
});
or, to forgo the find() function.
$('ul').each(function() {
console.log( $('li:first', this).text() );
});
you can also use:
$("li:nth-child(1)").each(function()
{
console.log($(this).text());
});
notes:
with :nth-child(n), all children are counted, regardless of what they are.
with :nth-child(n), n is 1-based (the first index is 1 instead of 0)
ul
li1
li2
ul3
li3.1
li3.2
ul3.3
ul3.3.1
ul3.3.2
li4
li5
and I must check all items in ul3 I can't be sure if there is only two or three or more lists
Well, I don't know what you mean by "check", but you can have a function be called for each <li> like this:
$('li').each(function() {
// whatever "check" means
});
With just plain Javascript:
var nodes = document.getElementsByTagName('li');
for (var i = 0; i < nodes.length; ++i) {
var li = nodes[i];
// check ...
}
edit — well it's not clear what exactly you need, but if you just need to inspect <li> elements in lists that are themselves in <li> elements, then you'd just code that into the jQuery selector:
$('ul ul li').each(function() { ... });
Use the each() like this:
$('ul li').each(function(){
// your code.....
});
This will loop through the ul children at any nested level.
Update:
and I must check all items in ul3 I
can't be sure if there is only two or
three or more lists
Try this in that case:
$('ul:eq(2) li').each(function(){
// your code.....
});
This will start from third ul and find its children at any nested level.