Develop Reference

How to insert a div tag in more than one location at the same time? [duplicate]

My question is:
Is that possible to add the same element without rewriting the same variable.
I am creating a slider, and i need to append a div with a class slide-el into block slider.
Here is a part of code
var body, html, sliderBody, btnLeft, btnRight, i, parts, vHeight, vWidth;
//Variable definitions
var i = 0,
parts = 3,
//Main html elements
body = document.body,
html = document.element,
//viewport Height and Width
vHeight = window.innerHeight,
vWidth = window.innerWidth,
sliderBody = _id("slider"),
btnLeft = _id("btn-left"),
btnRight = _id("btn-right"),
urls = ["http://www.wallpapereast.com/static/images/pier_1080.jpg",
"http://www.wallpapereast.com/static/images/pier_1080.jpg",
"http://www.wallpapereast.com/static/images/pier_1080.jpg",
"http://www.wallpapereast.com/static/images/pier_1080.jpg"];
slide = _createEl("div");
slide.className += "slide-el";
function _id(el){
return document.getElementById(""+ el +"");
}
function _createEl(el){
return document.createElement(""+ el +"");
}
window.onload = function(){
slideLayout();
}
function slideLayout(){
for(var i=0; i < urls.length; i++){
sliderBody.appendChild(slide);
}
}
The problem is that I can't append the same element that many times. It just creates one element instead of 4.
For you to understand better I made a fiddle:
https://jsfiddle.net/ud7dvn3z/

appendChild will remove the node from wherever it is before appending it to its new location, so you need to make copies of the node instead. You can use cloneNode for that. The true makes cloneNode perform a deep clone, i.e. with all its child nodes.
for(var i = 0; i < urls.length; i++){
sliderBody.appendChild(slide.cloneNode(true));
}

Okey guys! I found an answer. I have to put
slide = _createEl("div");
slide.className += "slide-el";
into for loop.
Now it looks like this:
for(var i=0; i < urls.length; i++){
slide = _createEl("div");
slide.className += "slide-el";
sliderBody.appendChild(slide);
}

createElement and loops [duplicate]

In JavaScript I am creating a grid (the type of grid you see in Photoshop) with HTML tables. The grid size is going to be variable, i.e., changeable by the user, so the size of each grid square must be calculated and divided by the number of pixels available to get an exact size grid.
I've done all this, but I have a problem adding in the necessary table elements to create the grid. My code is in full working order, except when I use the appendChild() function inside a for loop it only ever appends a single child, when it should be appending up to a couple of hundred.
My code:
grid.show = function(event)
{
var e = event;
if(grid.show_grid == false)
{
grid.show_grid = true;
parent.document.getElementById("grid_table").style.display = "block";
// Get grid (table) and create some elements.
grid.get_grid = parent.document.getElementById("grid_table");
grid.tr = parent.document.createElement("tr");
grid.td = parent.document.createElement("td");
// Clear the grid of all squares so we don't have to worry about subtracting anything.
grid.get_grid.innerHTML = "";
// Calculate the number of horizontal and vertical squares.
var horizontal = Math.ceil(grid.total_width / grid.size);
var vertical = Math.ceil(grid.total_height / grid.size);
// This was a nested loop, removed for demonstration.
// Attempting to add 10 "<tr><td></td></tr>" to the table.
for(var j = 0; j < 10; j++)
{
grid.tr.appendChild(grid.td);
}
//console.log(grid.tr);
// Add the elements to the table.
grid.get_grid.appendChild(grid.tr);
}
else
{
grid.show_grid = false;
parent.document.getElementById("grid_table").style.display = "none";
}
}
This only ever returns a single table row with single table data inside, like so:
<tr>
<td></td>
</tr>
I've already looked at this page and this page, and they sound promising but I just can't figure out how to make this work.
EDIT: Code now working, solution:
grid.show = function(event)
{
var e = event;
if(grid.show_grid == false)
{
grid.show_grid = true;
parent.document.getElementById("grid_table").style.display = "block";
grid.get_grid = parent.document.getElementById("grid_table");
grid.tr = null;
grid.td = null;
grid.get_grid.innerHTML = "";
var horizontal = Math.ceil(grid.total_width / grid.size);
var vertical = Math.ceil(grid.total_height / grid.size);
for(var i = 0; i < vertical; i++)
{
grid.tr = parent.document.createElement("tr");
for(var j = 0; j < horizontal; j++)
{
grid.td = parent.document.createElement("td");
grid.td.width = grid.size;
grid.td.height = grid.size;
grid.tr.appendChild(grid.td);
}
grid.get_grid.appendChild(grid.tr);
}
}
else
{
grid.show_grid = false;
parent.document.getElementById("grid_table").style.display = "none";
}
}

You are appending the same element over and over. You need to call document.createElement each time you wish to have a new element.
EDIT: If the element setup is really complicated and potentially includes children then you can also use Node.cloneNode

If you want to make one copy of the element, you will need to clone it. Use cloneNode()
So change
grid.tr.appendChild(grid.td);
to
grid.tr.appendChild(grid.td.cloneNode(true));

for(var j = 0; j < 10; j++)
{
grid.tr.appendChild(grid.td);
}
should be
for(var j = 0; j < 10; j++) {
var newTd = parent.document.createElement('td');
grid.tds.push(newTd); // if you need it, not sure why though
grid.tr.appendChild(newTd);
}

Add images to a div programatically and align them horizontally and vertically

I have 6 images and I want to add those images to a div programatically via javascript or jquery. What is the way to do it? Like I want the alignment to be 2 images in every. So, if there are 6 images, I want 3 rows, each row having 2 mages. Is it possible to without css via js or jquery only .
Also, I would like to add a double click handler to each image added. What is best way to it.
I am looping thru various images like :
for(var i = 0; i < elements.length; ++i) {
if(elements[i].querySelector("img")) {
var path = elements[i].querySelector("img").src;
var newimage = document.createElement('img');
newimage.setAttribute('src', path);
var div = document.getElementById("enclosingdiv");
enclosingdiv.appendChild(newimage);
}
}

You can do it like this-
<div id="imagesDisplay">
</div>
<script>
$(document).ready(function(){
var elements = new Array("book2.jpg","book3.jpg","book4.jpg","book5.jpg");
var noImages = 2; // 2 images per row
var imgCount = 0; // will keep count of images per row
var divHTML = ""; // will hold html tags to be dispalyed once the loop is complete i.e. all the images are added
for(var i = 0; i < elements.length; ++i) {
console.log(elements[i]);
if( imgCount ===0 ) {
divHTML += "<div class='row'>\n";
}
divHTML += "<div class='col-md-6'><img src='images/"+elements[i]+"'></div>\n";
imgCount++;
if( imgCount === noImages) {
imgCount = 0;
divHTML += "</div>\n";
}
}
$("#imagesDisplay").html(divHTML);
});
</script>

Using a loop, but only one element is being added

I was working on some JavaScript and was trying to add things dynamically. Below is my code. My problem is that I am trying to add three "li" elements, attach "img" tags to it ans attaching the src dynamically. But it is attaching only the last image i.e in my code "bid_3" to all the "li". Help appreciated.
(function() {
var bxSlider = document.createElement("ul"); //created ul
bxSlider.setAttribute("class", "bxslider"); // gave a class name bxslider.
for (i = 1; i < 4; i++) {
var itemsList = document.createElement("li");
var linkImages = document.createElement("img");
linkImages.src = "images/bid_" + i + ".jpg";
itemsList.appendChild(linkImages);
}
bxSlider.appendChild(itemsList);
document.body.appendChild(bxSlider); //append everything to the body.
var ulNum = document.getElementsByTagName("ul");
alert(ulNum.length); // should return 1
var liNum = document.getElementsByTagName("li");
alert(liNum.length); // should return 3
var imgNum = document.getElementsByTagName("img");
alert(imgNum.length); //should return 3
//call the slider.
$(document).ready(function() {
$('.bxslider').bxSlider();
});
}());
PS:- I am not a JavaScript expert. Please forgive if my code is bad.

You're only attaching itemsList after you've passed through the loop. Try this:
// Before loop stuff...
for (i = 1; i < 4; i++) {
var itemsList = document.createElement("li");
var linkImages = document.createElement("img");
linkImages.src = "images/bid_" + i + ".jpg";
itemsList.appendChild(linkImages);
bxSlider.appendChild(itemsList);
}
// After loop stuff...

Setting a the background image of a div from an array

I have to make a div and set the background image from an array of images, and make a two buttons that will change the picture to the next image in the array, or the previous image of the array. I've been looking around stackoverflow and w3 schools, but I don't know why it's not working.
var backgroundImage = new Array();
backgroundImage[0] = "np.jpg";
backgroundImage[1] = "putin.png";
backgroundImage[2] = "fob.jpg";
function nextImage()
var img = document.getElementById(element);
for(var i = 0; i < backgroundImage.length;i++)
for(var i = 0; i < backgroundImage.length;i++) {
document.getElementById(element).src = [0].src;
document.style.backgroundImage="url(backgroundImage[0])";
}

You are not evaluating the array, you are creating a literal you want
document.style.backgroundImage="url(" + backgroundImage[0] + ")";