Develop Reference

How to wrap for loop in a div?

I have been stuck on this silly thing, I can't figure out how to wrap my for loop inside of a div.
for (item = 0; item < event.length; item++) {
var ID = event[item].id;
element.find(".title").after("<span class='id'><img src='/avatar/" +ID+ "'/></span>");
}
I want to achive this:
<div>
<span></span>
<span></span>
<span></span>
</div>
Any Help is much apprciated.

Hope this snippet will be useful
// a variable for the dynamically created span
var spanString = "";
for (item = 0; item < event.length; item++) {
var ID = event[item].id;
// new string will con cat wit the spanString
spanString += ("<span class='id'><img src='/avatar/" + ID + "'/></span>");
}
// append the spanString to the `div.title`
$(".title").append($(spanString))

$(document).ready(function() {
//Assume sample event array
var event = [1, 2, 3];
for (item = 0; item < event.length; item++) {
var ID = event[item];
$("<span class='id'><img src='/avatar/" +ID+ "'/></span<br>").appendTo('#name');
};
});
Considering sample HTML Below
<div id="name">
hello
</div>
This way you can populate content inside the div

Changing elements within a tag to something else using JavaScript

I have the following tag in an html page:
<li class="slogan">888-888-8888</li>
I am trying to change it for it to look like this:
<li class="phone">
<i class="icon-phone"></i>
888-888-8888
</li>
I used the following code that i found to change the class name which works perfect, but i can't figure out how to change the contents to match what i want.
var els = [].slice.apply(document.getElementsByClassName("slogan"));
for (var i = 0; i < els.length; i++) {
els[i].className = els[i].className.replace(/ *\bslogan\b/g, "phone");
}

$('li.slogan').toggleClass('slogan phone')
.wrapInner(function() {
return ''
})
.prepend('<i class="icon-phone"></i>');
Demo
http://api.jquery.com/wrapinner/
http://api.jquery.com/prepend/

You can use jQuery's .replaceWith() function to do what you're after:
$('li.slogan').replaceWith(function() {
return '<li class="phone"><i class="icon-phone"></i>' + $(this).text() + '</li>'
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li class="slogan">888-888-8888</li>

$('.slogan').each(function(){
$(this).removeClass("slogan").addClass("phone"); // remove class and add .phone
$(this).html('<i class="icon-phone"></i>'+$(this).text()+'');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<li class="slogan">888-888-8888</li>
<li class="slogan">888-888-3626</li>
<li class="slogan">888-888-2551</li>

Try utilizing els[i].textContent to set href , text of a element , .innerHTML
var els = [].slice.apply(document.getElementsByClassName("slogan"));
for (var i = 0; i < els.length; i++) {
var text = els[i].textContent;
els[i].className = els[i].className.replace(/ *\bslogan\b/g, "phone");
els[i].innerHTML = "<i class=icon-phone></i>"
+ "" + text + "";
}
<ul>
<li class="slogan">888-888-8888</li>
</ul>

Since you are already cycling through the tags and have the item identified els[i], all you have to do is write to the innerHTML of that item.
var els = [].slice.apply(document.getElementsByClassName("slogan"));
for (var i = 0; i < els.length; i++) {
els[i].className = els[i].className.replace(/ *\bslogan\b/g, "phone");
els[i].innerHTML = "NEW CONTENTS";
}

Changing classes in a menu with Javascript

I am looking to create a very simple functionality of clicking on a menu tab and it changes color to let you know what page you are on. I am a novice so please take it easy on me...lol
/Menu in php header file/
<ul class="tabs" id="tabs">
<li class="selected">Home</li>
<li class="inactive">Bio</li>
<li class="inactive">Photo</li>
<li class="inactive">Thank</li>
<li class="inactive">Contact</li>
</ul>
/*This is the JavaScript file*/
window.onload = initPage;
function initPage() {
var tabs = document.getElementById("tabs").getElementsByTagName("li");
for (var i=0; i<tabs.length; i++){
var links = tabs[i];
links.onclick = tabClicked;
}
}
function tabClicked(){
var tabId = this.id;
document.getElementById(tabId).classList.toggle("selected");
var tabs = document.getElementById("tabs").getElementsByTagName("li");
for (var i=0; i < tabs.length; i++){
var currentTab = tabs[i];
if (currentTab.id !== tabId){
currentTab.class = "selected";
} else {
currentTab.class = "inactive";
}
}
}

element.setAttribute("class", "className");

You are using ids in your code but you don't have provided it in your markup. so give ids to li elements and try this.
function tabClicked(){
var tabId = this.id;
document.getElementById(tabId).classList.toggle("selected");
var tabs = document.getElementById("tabs").getElementsByTagName("li");
for (var i=0; i < tabs.length; i++){
var currentTab = tabs[i];
if (currentTab.id !== tabId){
currentTab.className = "inactive";
} else {
currentTab.className= "selected";
}
}
}
JS Fiddle Demo

Store a reference to each of the list items.
Create a variable to keep track of the current tab.
In an onclick function for each element (or you could use one onclick and just use some conditions), change the class attribute of the element by using the setAttribute() method.
Like this:
function onFirstTabClick() {
clearSelected();
tabVariable1.setAttribute("class","some-new-class");
}
function() clearSelected() {
switch(currentSelectedTrackerVariable) {
case 1: tabVariable1.setAttribute("class","some-new-class");
break;
// Do this for the amount of tabs that you have.
}
}

Working FIDDLE Demo
There is no need to define functions globally. Write all them in one package. The code below, works correctly with your HTML markup.
<script>
window.onload = function () {
var tab = document.getElementById('tabs');
var lis = tab.getElementsByTagName('li');
for (var i = 0, l = lis.length; i < l; i++) {
lis[i].onclick = function () {
for (var j = 0; j < l; j++) {
lis[j]["className"] = "inactive";
}
this["className"] = "selected";
};
}
};
</script>

If you use jQuery, then tabClicked can run:
jQuery('.selected').removeClass('selected').addClass('inactive');
jQuery(this).removeClass('inactive').addClass('selected');

Instantiate new element class using javascript

How can I instantiate an existing div element using javascript? Lets say I have:
<div class="container">
<div class="myclass">TROLL FACE</div>
</div>
I want to create as many 'myclass' element inside the 'container' class as I want using javascript. How can I do this?
Please help, thanks.

You may want the .clone method.
var ele = $('.myclass');
for (var i = 0; i < 5; i++) {
ele.clone().appendTo('.container');
}
The live demo.

var container = $('.container');
for (var i = 0; i < 5; i++) {
container.append('<div class="myclass">TROLL FACE</div>');
}
You could use the .append() method.

With or without JQuery:
for (var i = 0; i < howMany; ++i) {
// pure js
var div = document.createElement('div')
div.classList.add('myclass')
somePlace.appendChild(div)
// jquery
$("<div></div>").addClass('myclass').appendTo(somePlace)
}

Try this
<div class="container">
<div class="myclass">TROLL FACE</div>
</div>
var $container = $('.container');
var $myclass = $('.container').html();
var mycount ; // Your count
for(var i =0;i< mycount ; i++){
$container.append($myclass)
}

Is there a way to show these hidden element with mouseover?

In my html code I have a list of these <li> elements:
<li class="liitem" id="183"><span> Google </span><br>
<ul><li><span>gmail.com </span><span id="183" style="float:right;display:none;">delete</span></li></ul></li>
I want this:
When there is a mouseover on a <li> element of the "liitem" class, then set display:block of the span with the same id ( 183 in this case ).
I have writed this code but it's incomplete and I don't know how to do:
var elms = document.getElementsByTagName('li');
for (var i = 0; i < elms.length; i++){
if (elms[i].getAttribute('class') === 'liitem'){
elms[i].onmouseover = function(){
//set display:block
}
elms[i].onmouseout = function(){
//set display:none
}
}
}

you have set an id with the same value id should be unique. so you could add a value to the id to make it diferent for the liitem's id. like.
Just make sure there is no space to be safe between the a and span.
<ul>
<li class="liitem" id="183"><span> Google </span><br>
<ul><li><span>gmail.com</span><span style="float:right;display:none;">delete</span></li></ul>
<ul><li><span>docs</span><span style="float:right;display:none;">delete</span></li></ul>
</li>
</ul>
.
var elms = document.getElementsByTagName('li'),
emls_len = elms.length;
for (var i = 0; i < emls_len; i++){
if (elms[i].className == 'liitem'){
var arr_sub_uls = document.getElementById(elms[i].id).getElementsByTagName('ul');
// for each UL within the liitem
for (var j = 0; j < arr_sub_uls.length; j++){
// assign id's to the span around delete
var actionis = arr_sub_uls[j].childNodes[0].childNodes[1].id = elms[i].id + "_" + j; // elms[i].id is the liitem id and j is the number of uls'
// attach the event handler
addEventHandler(arr_sub_uls[j].childNodes[0],actionis)
}
}
}
function addEventHandler(s, actionis){
s.onmouseover = function(){ document.getElementById(actionis).style.display = "block" }
s.onmouseout = function(){ document.getElementById(actionis).style.display = "none" }
}
see fiddle: http://jsfiddle.net/EW2cm/1/

You can do this:
elms[i].style.display = "block";
and
elms[i].style.display = "none";