I have this ul of id=“dropdown1” defined by class=“dropdown-content”
If I add the li directly to the web page within ul tags, they are formatted correctly.
But if I add the li through appendChild, the formatting is not applied.
How do I get the nodes to assume the formatting?
function makeDropdown(){
var node = document.createElement("li");
var textnode = document.createTextNode('Home');
textnode.href = '../index.html';
node.appendChild(textnode);
var drop = document.getElementById('dropdown1');
drop.appendChild(node);
}
Yeah, can’t do that – it will make the dropdown menu appear already visible. Clicking will change the background-color, etc. to make the dropdown visible.
Looks like I was forming the node wrong in the first place. This finally works:
function makeDropdown(){
var node = document.createElement("li");
var link = document.createElement('a');
link.setAttribute('href', '../index.html');
node.appendChild(link);
var textnode = document.createTextNode('Home');
link.appendChild(textnode);
var drop = document.getElementById('dropdown1');
drop.appendChild(node);
}
Do to create all the link, do I simply copy/paste the entire code one copy after another, and just add the links and link names? Is there a short way it is supposed to be done?
I don’t know, StevenHu. I do not normally use JavaScript so I don’t know the best way to create these links. A real JS person would be a better advisor here.
So this is shorthand for making an unordered list? I’ll try it out. … Looks like I should put the paired values in an array and cycle through it for each list item.
I tried this, but no response and no errors in console:
function makeDropdown(href_val, link_text) {
var o = new Object();
o.href_val = href_val;
o.link_text = link_text;
o.buildList = function(){
var node = document.createElement("li");
var link = document.createElement('a');
link.setAttribute('href', href_val);
node.appendChild(link);
var textnode = document.createTextNode(link_text);
link.appendChild(textnode);
var drop = document.getElementById('dropdown1');
drop.appendChild(node);
};
return o;
var link1 = makeDropdown('../index.html', 'Home');
var link2 = makeDropdown('search.html', 'Search');
}
(Basic idea from Javascript for Web Developers, p180, The Factory Pattern)
function Dropdown(href_val, link_text) {
this.href_val = href_val;
this.link_text = link_text;
this.buildList = function(){
var node = document.createElement("li");
var link = document.createElement('a');
link.setAttribute('href', href_val);
node.appendChild(link);
var textnode = document.createTextNode(link_text);
link.appendChild(textnode);
var drop = document.getElementById('dropdown1');
drop.appendChild(node);
console.log(href_val, link_text);
};
}
var dropdown1 = new Dropdown('../index.html', 'Home');
var dropdown2 = new Dropdown('search.html', 'Search');
You are returning that object, but you’re never actually calling buildlist() on it. Also, the two calls to makeDropdown() should be outside the function itself, as that code following the return is never reached (and would otherwise cause an infinite recursion).
Anyway, using a factory is a nice idea, but I think it makes the affair unnecessarily complicated here. For example, you might just pass a reference to the parent element as well, like
function appendItem(parent, href, text) {
var item = document.createElement('li');
var link = document.createElement('a');
var textNode = document.createTextNode(text);
link.appendChild(textNode);
link.setAttribute('href', href);
item.appendChild(link);
parent.appendChild(item);
}
var list = document.getElementById('dropdown1');
appendItem(list, '#foo', 'foo');
appendItem(list, '#bar', 'bar');
If you are only going to populate that list once after loading the data (and don’t need to store references to those nodes), you might do it even simpler by concatenating it all to an HTML string, and then inserting it like
list.innerHTML = theString // '<li><a href="#foo">foo</a></li> etc.
Here’s a related thread from a couple of weeks ago.
x-post… I was referring to your previous comment. ^^
You can pass a reference to any list element where the new list item will get appended, such as #dropdown1 in the above example. Oh and speaking of which, note that this
<ul id="dropdown1" class="dropdown-content"></ul>
is invalid HTML as a list must always contain list items. You could instead use a div here and replace it with the list when it’s fully populated, like
<div id="placeholder"></div>
var placeholder = document.getElementById('placeholder');
var list = document.createElement('ul');
// Populate the list, and then
placeholder.parentNode.replaceChild(list, placeholder);
