Develop Reference

Chaining jquery append

I'm trying to figure out how I can chain multiple append into my markup. Basically after appending an element, I would like the next element to append it to the first appended element. I hope what I'm saying makes sense.
If you take a look at my code, I just appended the element <ul class="menu" /> into the element #footer .research-centers-menu .research.
Then on the next code I'm trying to insert/append the variable centers to the <ul class="menu" />
The current output right now doesn't insert the element but places it outside instead. Apologies for my bad english and explanation
var researchCenters = $('a[href$="/items"]').next().clone(),
centersList = $('li', researchCenters),
centers = centersList.slice(0);
var research = $('#footer .research-centers-menu .research').append('<ul class="menu" />');
$(research).append(centers);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<ul>
<li>item one</li>
<li>item two</li>
</ul>
</li>
</ul>
<div id="footer">
this is a footer
<div class="research-centers-menu">
<div class="research">
</div>
</div>
</div>

The cause of your appending issue is because append() returns the original element, not the appended element.
To make your code work you could invert the logic so that you create the new ul, then use appendTo(). This will retain the reference required to append the li. Try this:
var researchCenters = $('a[href$="/items"]').next().clone(),
centersList = $('li', researchCenters);
var $research = $('#footer .research-centers-menu .research');
var $ul = $('<ul class="menu" />').appendTo($research);
$ul.append(centersList);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<ul>
<li>item one</li>
<li>item two</li>
</ul>
</li>
</ul>
<div id="footer">
this is a footer
<div class="research-centers-menu">
<div class="research"></div>
</div>
</div>

try to append like this.
var researchCenters = $('a[href$="/items"]').next().clone(),
centersList = $('li', researchCenters),
centers = centersList.slice(0);
var research = $('#footer .research-centers-menu .research')
var ul =$('<ul class="menu" />').append(centers);
research.append(ul);

How to insert a anchor tag into list item with Javascript?

I have one list item which have a class name in html5
<li class="navi"> HOME </li>
that list item I want to insert a anchor tag via class name in javascript. anchor is here:
HTML
how can i do this to be:
**<li class="navi"><a href="#HOME" >HOM E</a> </li>**

pure vanilla javascript:
function makelink() {
var li = document.getElementsByClassName('navi')[0];
li.innerHTML = 'HTML';
}
<ul>
<li class="navi"> HOME </li>
</ul>
<button onclick="makelink()">click here to make HOME link</button>

Try this
$(document).ready(function(){
$("ul").append("<li class='navi'><a href='#HOME' >HOM E</a></li>")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<ul>
<li class="navi"> HOME </li>
</ul>

If you're using jQuery, you can do this:
$li = $('li.navi');
$li.html("<a href='#"+ $li.text() +"'>"+ $li.text() +"</a>");

Without complete code example showing what you are attempting, we are guessing. But you could try:
$('.navi').append('HOME');

Document.createElement and Node.appendChild
var listItem = document.querySelector('navi');
var name = listItem.innerText;
var anchor = document.createElement('a');
var anchor.href = "#"+name;
var anchor.innerText = name;
listItem.appendChild(newNode);

show/hide visibility by classname not ById

I am using this javascript and code to hide/show certain divs but on each click, there are multiple divs on the page that I want to hide/show so I would rather do it by class name. I don't really know javascript so the simpler, the better.
Here is the javascript:
<script type="text/javascript"><!--
function show_visibility(){
for(var i = 0,e = arguments.length;i < e;i++){
var myDiv = document.getElementById(arguments[i]).style;
myDiv.display = "block";
}
}
function hide_visibility(){
for(var i = 0,e = arguments.length;i < e;i++){
var myDiv = document.getElementById(arguments[i]).style;
myDiv.display = "none";
}
}
//--></script>
Here is the html:
<ul id="menubar_index" style="display:block;" class="index">
<li>Home</li>
<li>How It Works</li>
<li>Testimonials</li>
<li>FAQ</li>
</ul>
<ul id="menubar_how" style="display:none;" class="howitworks">
<li>Home</li>
<li>How It Works</li>
<li>Testimonials</li>
<li>FAQ</li>
</ul>

You may want:
document.querySelector / document.querySelectorAll - they will allow you to select elements using CSS-like rules;
document.getElementsByClassName - this one will simply search by class names.

Variable not being set correctly; how to fix?

I want my JQuery to select one of the navigation links—based on the page that I'm on—and then I want it to move it to the top of the list.
This is the HTML of my navigation bar:
<nav>
<ul id=nav>
<li>Home</li>
<li>Skillsets</li>
<li><icon>Gallery</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
This is the JQuery I'm using to try and reorder the list:
var page = document.location.pathname.match(/[^\/]+$/)[0];
$(document).ready(function(){
var ul = $('nav').children('ul'),
li = ul.children('li'),
href = $('a[href*='+page+']');
//move element to top
ul.prepend(href.parent());
});
It isn't working and I would assume that it's because the href variable isn't being set correctly. alert(href); and alert(href.parent()); output nothing.
Any ideas? Thanks!

As #user3064914 said, you missed '#', but you missed quotes either:
<ul id = "nav">

var href = $('a[href*="'+page+'"]');
EDIT
Also, you can write a bit shorter with child selectors:
var ul = $('nav > ul'),
href = ul.find('> li a[href*="' + page + '"]');
ul.prepend(href.parent());

Try this, it will work.
<script>
var page = document.location.pathname.match(/[^\/]+$/)[0];
$(document).ready(function()
{
var href = $('a[href='+'"'+page+'"'+']').parent();
var parent = $("#nav");
var childToMoveLast = href.remove();
parent.prepend(childToMoveLast);
});
</script>
Here is the HTML
<nav>
<ul id='nav'>
<li>Home</li>
<li>Skillsets</li>
<li><icon>Gallery</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>

Iterate Nested JSON with Jquery and return matched index?

If I have a nested JSON object:
var library = {
"Gold Rush": {
"slides": ["Slide 1 Text","Slide 2 Text","Slide 3 Text","Slide 4 Text"],
"bgs":["<img src='1.jpg' />","","<img src='2.jpg' />",""]
},
"California": {
"slides": ["Slide 1 Text","Slide 2 Text","Slide 3 Text"],
"bgs":["","<img src='3.jpg' />",""]
}
}
How do I match the "slides" index to the "bgs" index for each item?
I'm using jQuery. Here's what I have so far:
HTML:
<div id="shows">
<ul>
<li>Gold Rush</li>
<li>California</li>
</ul>
</div>
<div id="items">
<ul></ul>
</div>
Javascript:
var lib = JSON.parse(library);
$('#shows li').bind('click', function () {
var title = $(this).text();
var slides = (lib[title].slides);
var bgs = (lib[title].bgs);
$('#items ul').html('');
$.each(slides, function(i){
var bg = $(bgs).eq(i); // The problem seems to be here?
$('#items ul').append('<li><ul><li>'+this+'</li><li>'+bg+'</li></ul></li>');
});
});
My hope is for the output for the show "California" to look like this:
<div id="items">
<ul>
<li>
<ul>
<li>Slide 1 Text</li>
<li></li>
</ul>
</li>
<li>
<ul>
<li>Slide 2 Text</li>
<li><img src='3.jpg' /></li>
</ul>
</li>
<li>
<ul>
<li>Slide 3 Text</li>
<li></li>
</ul>
</li>
</ul>
</div>
Thanks!

Change this:
var bg = $(bgs).eq(i);
to this:
var bg = bgs[i];
...also, you should change this:
$('#items ul')
to this:
$('#items > ul')
...it uses the child-selector[docs] so that you're not targeting the new <ul> elements you've already appended.
(I guess the > isn't actually necessary in this case since you're clearing the content of #items ul on each click.)
Live Example: http://jsfiddle.net/uHKcd/1/
You could also cache the #items > ul element so you don't need to keep re-selecting it, especially in the $.each() loop.
Here's the finished code:
var items_ul = $('#items ul');
$('#shows li').bind('click', function () {
var title = $(this).text();
var slides = (lib[title].slides);
var bgs = (lib[title].bgs);
items_ul.html('');
$.each(slides, function(i){
var bg = bgs[i];
items_ul.append('<li><ul><li>'+this+'</li><li>'+bg+'</li></ul></li>');
});
});

bgs is an array, you shouldn't wrap it in jquery, simply use it:
var bg = bgs[i];