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>
Related
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 tried to create a function that creates a dynamic menu. Ive been able to create the "a" tags and give them individual links while also assigning them ID's. The problem is that I cant get the links inside of a list where my CSS applies its rules.
function write_navBar() {
var links = ["intro.html", "art.html", "portfolio.html", "guides.html", "about_me.html"]
var ul = document.createElement("ul");
document.getElementById("mainNav").appendChild(ul);
for (i = 0 ; i < links.length ; i++) {
var ul = document.createElement("ul");
var a = document.createElement("a");
var text = document.createTextNode(links[i]);
a.href = links[i];
a.id = "mainNav";
a.text = links[i];
document.getElementById("mainNav").appendChild(a);
}
}
Any suggestions on cleaning the code while keeping to javascript would be appreciated. And also any explanation of syntax would be also appreciated.
Thank you!
function write_navBar() {
var links = ["intro.html", "art.html", "portfolio.html", "guides.html", "about_me.html"];
var ul = document.createElement("ul");
var li, a, text;
for (var i = 0, l = links.length; i < l; ++i) {
li = document.createElement('li');
a = document.createElement('a');
text = document.createTextNode(links[i]);
a.href = links[i];
a.setAttribute("class", "some-class-name");
a.appendChild(text);
li.appendChild(a);
ul.appendChild(li);
}
document.querySelector("#mainNav").appendChild(ul);
}
• Use querySelector over getElementById. Both work, but theres a performance boost to querySelector. The API is close to jQuery and most (if not all) newer browsers support querySelector.
• Append the ul AFTER you've added the elements again for performance reasons.
• Use an LI to hold the link element, a second UL wont do what you want.
• Don't resuse id's, the thing you would want to use is a class, they basically do the same thing but javascript treats id's and classes differently. If that doesnt fit your needs, try a compound CSS selector in your css such as:
#mainNav ul li a { /* styles here */ }
You have to ensure that you append the correct items to the correct parents. Scanning your code I assume you want the following HTML output:
<div id="mainNav"> // this is already there
<ul>
<li>
intro.html
</li>
... // repeat for other items in the array
</ul>
</div>
You can modify your code like this to get the above result:
function write_navBar() {
var links = ["intro.html", "art.html", "portfolio.html", "guides.html", "about_me.html"]
var ul = document.createElement("ul");
document.getElementById("mainNav").appendChild(ul);
for (i = 0 ; i < links.length ; i++) {
var li = document.createElement("li");
var a = document.createElement("a");
a.href = links[i];
a.className = "some-class-to-target-in-your-css";
a.innerText = links[i];
ul.appendChild(li);
li.appendChild(a);
}
}
Your approach isn't that bad. I at one time took a similar outlook towards doing these. However, I am now of the belief it is far more testable, reliable, and easier to build these as actual templates, clone them, and populate them through a factory pattern.
In your setup, you have a parent ul, and then build multiple ul's with a's in them -- I am going to assume you meant to nest li elements -- and so that is what this will do.
Here is how I would approach that in your scenario.
Step 1: Build a the template, and create the styling and visual effect.
.navLink a{
padding:3px;
}
<ul class="menuTemplate">
<li class="navLink"><a></a></li>
</ul>
Simple style, I know. But it is just for simplicity, you can really do whatever you want there to style the example. Note that it is a simple structure, so all you are really seeing in there is a template, an li element, and the a element.
What we are also going to add to the style definition in our use case is
.menuTemplate{
display:none;
}
Because we don't actually want to see the template, we just want to use it. Next, we will create a factory for these.
var navFactory = new function(){
var template = document.querySelector('.menuTemplate .navLink');
this.Create = function(text,href){
var nav = template.cloneNode(true);
var link = nav.querySelector('a');
link.href = href;
link.innerText = text;
return nav;
}
};
The last step is to simply take your element that will hold the nav elements - you named this "mainNav" above - and fill it in from the factory.
var navFactory = new function(){
var template = document.querySelector('.menuTemplate .navLink');
this.Create = function(text,href){
var nav = template.cloneNode(true);
var link = nav.querySelector('a');
link.href = href;
link.innerText = text;
return nav;
}
};
function write_navBar() {
var links = ["intro.html", "art.html", "portfolio.html", "guides.html", "about_me.html"];
var navUl = document.querySelector('#mainNav ul');
for(var i = 0; i < links.length; i++){
navUl.appendChild(navFactory.Create(links[i],links[i]));
}
}
write_navBar();
.menuTemplate{
display:none;
}
.navLink a{
padding:3px;
opacity:0.85
}
.navLink a:hover{
opacity:1;
}
<ul class="menuTemplate">
<li class="navLink"><a></a></li>
</ul>
<div id="mainNav">
<ul></ul>
</div>
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.
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
}
How do I add a list element to an existing ul using a function from an onclick? I need it to add to this type of list ...
<ul id="list">
<li id="element1">One</li>
<li id="element2">Two</li>
<li id="element3">Three</li>
</ul>
... another list item with the id "element4" and text "Four" under that. I tried this function but it doesn't work...
function function1() {
var ul = document.getElementById("list");
var li = document.createElement("li");
li.appendChild(document.createTextNode("Element 4"));
}
I don't know JQuery so Javascript only please. Thank you!!
You have not appended your li as a child to your ul element
Try this
function function1() {
var ul = document.getElementById("list");
var li = document.createElement("li");
li.appendChild(document.createTextNode("Four"));
ul.appendChild(li);
}
If you need to set the id , you can do so by
li.setAttribute("id", "element4");
Which turns the function into
function function1() {
var ul = document.getElementById("list");
var li = document.createElement("li");
li.appendChild(document.createTextNode("Four"));
li.setAttribute("id", "element4"); // added line
ul.appendChild(li);
alert(li.id);
}
You were almost there:
You just need to append the li to ul and voila!
So just add
ul.appendChild(li);
to the end of your function so the end function will be like this:
function function1() {
var ul = document.getElementById("list");
var li = document.createElement("li");
li.appendChild(document.createTextNode("Element 4"));
ul.appendChild(li);
}
First you have to create a li(with id and value as you required) then add it to your ul.
Javascript ::
addAnother = function() {
var ul = document.getElementById("list");
var li = document.createElement("li");
var children = ul.children.length + 1
li.setAttribute("id", "element"+children)
li.appendChild(document.createTextNode("Element "+children));
ul.appendChild(li)
}
Check this example that add li element to ul.
Just use innerHTML:
function function1() {
ul.innerHTML += `<li> four </li>`;
}