Newbie question - Is this code eloquent enough to create four list items? or Should I be using documentFragment instead? The code seems to work fine - JsFiddle.
Created list and li variables
var list = document.getElementById("myList");
var li = null;
Created x number of list elements and companion text nodes
for(var i=1; i<=4; i++){
var li = document.createElement("li");
li.appendChild(document.createTextNode("Number " + i));
Add li to list
list.appendChild(li);
}
Based entirely on the JSFiddle demo you've provided: No. What you currently have is semantically incorrect. You're currently appending your li to the body, not the ul element:
<ul></ul>
<li>Number 1</li>
Change:
document.body.appendChild(li);
To:
list.appendChild(li);
JSFiddle demo.
As for the code you've provided in the question, you also need to change it so that your li elements get appended to your ul element. You also need to change your class into an ID, as getElementById("myList") pulls an element with an ID of "myList", whereas your current ul has no such ID.
Actually there is an error, because you're adding the lis to the body instead of the ul
also the markup is not well created, change
<ul class="myList"></ul>
with
<ul id="myList"></ul>
To use an id and then:
var list = document.getElementById("myList");
var li = null;
for(var i=1; i<=4; i++){
var li = document.createElement("li");
li.appendChild(document.createTextNode("Number " + i));
//document.body.appendChild(li); **error here**
list.appendChild(li); //fix
}
Related
I need some help displaying my javascript array within a UL html element.
I have been trying to figure this out for the last 4 days and I am not getting it right.
See my code below:
function load() {
let favLanguages = ["html", "css", "javascript", "go", "ruby"];
// create ul element and set its attributes.
let ul = document.createElement("ul");
for (i = 0; i <= favLanguages.length; i++);
{
let li = document.createElement("li"); // create li element.
li.innerHTML = favLanguages[i]; // assigning text to li using array value.
document.getElementById(1);
ul.appendChild(li); // append li to ul.
}
}
html
<body onload="load()">
<h1>My favourite languages:</h1>
<ul id="1"></ul>
I would really appreciate any help
Thanks
You're pretty much there. You had a couple of issues:
You already have specified a ul element within your HTML. You don't need to re-create it again by doing document.createElement('ul'), just select the ul instead
You had your ul element's id as the number 1. When you tried to select the ul by doing document.getElementById(1)`, that will not work. You need to pass in the string of the id. I rename it to 'one' to fix it.
In your for(...) loop, you had a semi colon (;) after for(...);. That will not work. I removed the semi colon for you.
You last line of code ul.appendChild(li) is the only thing you need to do after you set your innerHTML. You already have the ul in the dom, so just append your new elements to that.
Example:
function load() {
const favLanguages = ["html", "css", "javascript", "go", "ruby"];
// Get a refrerence to the UL
const ul = document.getElementById('one');
for (i = 0; i <= favLanguages.length; i++) {
const li = document.createElement("li"); // create li element.
li.innerHTML = favLanguages[i]; // assigning text to li using array value.
ul.appendChild(li); // append li to ul.
}
}
load();
<h1>My favourite languages:</h1>
<ul id="one"></ul>
The second line has an inline comment disrupting the code on that line. So, the let ul = document.createElement("ul"); is not read by the JS engine. It can be fixed by moving the comment after the code.
Your for loop and your function declaration have a semicolon terminating it. Try fixing it like below:
function load() {
let favLanguages = ["html", "css", "javascript", "go", "ruby"]
let ul = document.createElement("ul"); // create ul element and set its attributes.
for (i = 0; i <= favLanguages.length; i++) { let li = document.createElement("li"); // create li element.
li.innerHTML = favLanguages[i]; // assigning text to li using array value.
document.getElementById(1);
ul.appendChild(li); // append li to ul.
}
}
window.onload = function(){
// init arr
let favLanguages = ["html", "css", "javascript", "go", "ruby"];
// get ul element after document loaded: window.onload
let ulNode = document.getElementById("a1");
// create ul element and set its attributes.
let ul = document.createElement("ul");
for (let i = 0; i < favLanguages.length; i++){
let li = document.createElement("li"); // create li element.
li.innerText = favLanguages[i]; //inrHTML if you have new element
ulNode.appendChild(li);
}
}
<h1>My favourite languages:</h1>
<ul id="a1"></ul>
So, if we're going to append a LI to UL we should do this:
var list = document.createElement('li');
var ulist = document.createElement('ul');
ulist.appendChild(list);
what if I create a span, should I do this?
var list = document.createElement('li');
var ulist = document.createElement('ul);
var span = document.createElement('span');
span.appendChild(ulist);
ulist.appendChild(list);
That's the sort of thing you'd do, yes (other than the typo — missing closing '), except span elements cannot contain ul elements. The content model of span is phrasing content, but ul can only be used where flow content is expected.
You are missing a quote after ul, but your code is correct.
In your latter code, you are appending a <li> to a <ul> and this same <ul> to a <span>. You may want to append all this to the body to make them appear. See example below:
const list = document.createElement('li');
const ulist = document.createElement('ul');
const span = document.createElement('span');
span.appendChild(ulist);
ulist.appendChild(list);
document.body.appendChild(span);
I have below code:
<ul id='someId'>
<li class='someClass'>
</li>
</ul>
I want to set focus on first li element within ul based on some condition.
My first attempt is like this:
var ul = document.getElementById('someId');
var child = ul.childNodes[0];
child.focus();
My second attempt is like this :
var y = document.getElementsByClassName('someClass');
var aNode = y[0];
aNode.focus();
But none of the above works
Any ideas?
The problem is that you can't focus a non input element without setting tabIndex.
<li tabIndex="-1">...</li>
You can Try this fiddle: jsfiddle
An 'li' can't have focus, however an 'input' can, so you write yourself the following script:
function installLI(obj){
var ul = document.createElement('ul');
obj.appendChild(ul);
var li = document.createElement('li');
var txt = document.createElement('input');
li.appendChild(txt);
ul.appendChild(li);
txt.focus();
li.removeChild(txt);
}
Where 'obj' is the object (like an editable div) that you're appending your list to.
I have a large file of this form [similar div's throughout]. I want to be able to select a div, find the number of ul's in it and traverse through each of them to get value of each li in it.
<div class="experiment">
<div class="experiment-number">5</div>
<ul class="data-values">
<li><div></div> 14</li>
<li><div></div> 15</li>
</ul>
<ul class="data-values">
<li><div></div> 16</li>
</ul>
</div>
I have tried looping through all experiment divs, then select the uls, but it selects all the ul in the page, not only the ones under current div.
$('experiment ul').eq('$i');
Your HTML is currently incorrect, since you're simply starting new <div> and <ul> elements rather than closing the existing ones. Ignoring that because it's trivial to fix, we'll move on to the real issue.
You need to select all of the <div class="experiment"> elements, then iterate through them. To do that you can use the .each() function. It might look something like this:
var experiments = $('.experiment'); // all of them
experiments.each(function(i, val) { // will iterate over that list, one at a time
var experiment = $(this); // this will be the specific div for this iteration
console.log("Experiment: " + experiment.find('.experiment-number').text());
// outputs the experiment number
console.log("Experiment ULs: " + experiment.find('ul').length);
// number of <ul> elements in this <div>
var total = 0;
experiment.find('ul.data-values li').each(function() {
total += parseInt($(this).text(), 10);
});
console.log("Experiment total: " + total);
// outputs the total of the <li> elements text values
});
Take a look at this jsFiddle demo.
to get all the ul inside div.experiment
var ul = $('.experiment').find('ul');
and to get all li elements inside each ul found above
ul.each(function(list) {
var li = $(list).find('li');
});
$('.experiment').each(function() {
var cnt = $(this).children('ul').length;
$(this).find('.experiment-number').text(cnt);
});
First of all you need to work out the correct selector for each DIV.
The selector you want is:
".experiment"
Notice the . to denote a class selector.
This will allow you access to each DIV element. If you then want to loop though each of these, you can do so like this:
$(".experiment").each(function(){
var div = $(this);
var elementsInThisDiv = div.find("ul");
//you now have a list of all UL elements in the current DIV only
var numberOfElements = elementsInThisDiv.length;
//you now have a count of UL elements belonging to this DIV only
//you can loop the UL elements here
$(elementsInThisDiv).each(function(){
var ul = $(this);
//do something with the UL element
//like get the LI elements...
var liElements = ul.find("li");
});
});
IMPORTANT: There is also an error with your HTML, you need to close your <ul> elements correctly using </ul>
If I have an unordered list like
<ul id="list">
<li>Helo World-1</li>
<li>Helo World-2</li>
<li>Helo World-3</li>
</ul>
I want to add a sublist item to it dynamically. Is there any method in javascript to do that. How could I do it.
edit
I need an item at next level, i.e. a sub list of Helo World that I mentioned in OP too, something like as under. One more issue here is that I need the items to be a permanent part of my code.
<ul id="list">
<li>Helo World-1</li>
<li>Helo World-2</li>
<li>Helo World-3</li>
<ul>
<li>One</li>
<li>Two</li>
</ul>
</ul>
Using pure DOM methods:
var ul = document.getElementById("list");
var li = document.createElement("li");
li.appendChild(document.createTextNode("Your list item text"));
To add the list item to the end of the list:
ul.appendChild(li);
To insert the list item between existing list items (note you'd have to give the existing list item an id in this example):
ul.insertBefore(li, document.getElementById("list_item_id"));
Update
If you want to add a nested list, you'll need to add it to a list item rather than directly inside the list in order for it to be valid:
var lis = ul.getElementsByTagName("li");
var lastLi = lis[lis.length - 1];
var nestedUl = document.createElement("ul");
var nestedLi = nestedUl.appendChild(document.createElement("li"));
nestedLi.appendChild(document.createTextNode("One"));
lastLi.appendChild(nestedUl);
$('<li>...</li>').appendTo($('#list')); /* in jquery */
otherwise straight js
var mylist = document.getElementById('list');
mylist.appendChild(document.createElement('li'));
Note: if you need to set also text
var mylist = document.getElementById('list');
var newli = document.createElement('li');
newli.innerHTML('Helo World ' + mylist.getElementsByTagName('li').length + 1);
mylist.appendChild(newli);
I've created a sample in jsfiddle
var el = document.getElementById("list");
var li = document.createElement("li");
li.innerHTML = "item";
el.appendChild(li);
You can go through the w3schools html dom reference to see how we can manipulate the html elements using javascript.
But I think the cleaner way will be to use a third party library like jQuery which will allow a much easier way to manipulate the dom.
ex: If use jQuery this will be as easy as
$("<li>...</li>").appendTo("#list")
EDIT:
Based on your edit you can try this,
var ul = document.getElementById("list");
ul.children[2].innerHTML = "<ul><li>sub 1</li><li>sub 2</li><li>sub 3</li></ul>";
This will get the 3rd <li> of the <ul> and add a sublist to it
AFAIK, there is no equivalent HTML DOM object for list.
Anyway you can use the innerHTML:
var list = document.getElementById("list");
var item = "<li>New Item</li>";
list.innerHTML += item;