Apologies for the vague title of this question!
I have the following JS, it looks for img tags with images of certain sources. It then replaces the img tag with a span so that I can replace the images/icons with iconfonts.
var paths = [
"folder%2Fadd",
"folder%2Fclear",
"folder%2Fdelete",
"folder%2Fedit",
"folder%2Fmove",
"folder%2Fsort",
];
var fullPaths = paths.map(function(x) { return "img[src*='" + x + "']"; } );
var imgs = document.querySelectorAll(fullPaths);
for (var i = 0; i < imgs.length; i++) {
var span = document.createElement("span");
span.addClass("iconfont");
span.title = imgs[i].parentNode.title;
imgs[i].parentNode.replaceChild(span, imgs[i]);
}
Everything is working nicely so far, but there is one more issue that I cannot solve.
Apart from adding a class to the span of .iconfont, I also want to add two more classes to the span - 1) the original class of the replaced img element, and 2) the name of the image source as in my array, but without the 'folder/' bit in front.
So, at the moment I have:
<img class = "tinyicon" src="******/t/edit">
and my script creates this in the DOM:
<span class = "iconfont">
But I want my script to create the following:
<span class = "iconfont tinyicon edit">
That is what I am after :)
Thanks for having a look!
var paths = [
"folder%2Fadd",
"folder%2Fclear",
"folder%2Fdelete",
"folder%2Fedit",
"folder%2Fmove",
"folder%2Fsort",
];
var fullPaths = paths.map(function(x) { return "img[src*='" + x + "']"; } );
var imgs = document.querySelectorAll(fullPaths);
for (var i = 0; i < imgs.length; i++) {
var img = imgs[i],
iClass = img.className,
iSrc = img.src.split('/').pop(),
span = $('<span />', {'class': 'iconfont '+iClass+' '+iSrc,
title : img.parentNode.title
});
$(img).replaceWith(span);
}
Change this:
var span = document.createElement("span");
span.addClass("iconfont");
to this:
var span = document.createElement("span");
span.className = "iconfont tinyicon edit";
Your addClass() wouldn't work anyway because span is a DOM node, not a jQuery object.
var span = document.createElement("span");
var className = "iconfont " + imgs[i].className + ' ' + imgs[i].src.match(/([a-z])$/i, '')
span.className = className ;
span.title = imgs[i].parentNode.title;
imgs[i].parentNode.replaceChild(span, imgs[i]);
Related
I would like to have 3 li elements and in those li elements I want 1 image.
All the images go into the first li element instead of being spread out.
Any suggestion would be greatly appreciated...
I have tried this but it does not work..
/////////////CODE///////////////////
var node = document.createElement("LI");
node.innerHTML =
"<ul class= rsox style=list-style-type: none>" +
"<li class=images id=imageList>" +
"</li>" +
"</ul>";
document.getElementById('sele').appendChild(node);
var image = { image1.jpg, image2.jpg, image3.jpg };
for (i = 0; i < image.length; i++) {
container = document.getElementById ("imageList");
container.innerHTML += "<img class= imageClass src=https://www.WEB-SITE-NAME.com/" + image[i] + ">"
}
Your code is really not clean and I think I know what you want to achieve, so here's my try in fixing your code:
var images = ["image1.jpg", "image2.jpg", "image3.jpg"];
var node = document.createElement("li"};
node.className = "rsox" ;
node.style.listStyleType = "none";
for (var i = 0; i < images.length; i++) {
var listItem = document.createElement("li");
listItem.className = "images";
var img = document.createElement("img");
img.className = "imageClass";
img.alt = "";
img.src = "https://www.WEB-SITE-NAME.com/" + images[i];
listItem.appendChild(img);
node.appendChild(listItem);
}
document.getElementById("sele").appendChild(node);
I haven't tested this, so if you get any errors or something, tell me.
I have a trivial issue and need your help. Thanks to you, I have 2690 squares generated by js:
var i, square, text, container = document.getElementById("square_container");
for (i = 1; i <= 2690; i += 1) {
square = document.createElement("div");
square.id = "square" + i;
square.classList.add("square");
text = document.createElement("h1");
text.innerHTML = i;
text.id = "text" + i;
square.appendChild(text);
container.appendChild(square);
text.classList.add("hover");
}
The code above generate 2690 of this:
<div id="square1" class="square"><h1 id="text1">1</h1></div>
And now, I need to add following html content to each .square class:
<div class="hover">Click Me</div>
So in the result I need to have:
<div id="square1" class="square"><h1 id="text1">1</h1>
<div class="hover">Click Me
</div>
</div>
https://fiddle.jshell.net/tynw5c34/3/
I tried .append, .addClass...but it doesn't work. Thank you in advance for your help!
Here is another solution:
for (i = 1; i <= 2690; i += 1) {
square = document.createElement("div");
square.id = "square" + i;
square.classList.add("square");
text = document.createElement("h1");
text.innerHTML = i;
text.id = "text" + i;
square.appendChild(text);
container.appendChild(square);
$('#square'+i).append('<div class="hover">Click Me</div>');
}
If you want generate squares with Javascript, use this :
var i, square, text, container = document.getElementById("square_container");
var content = document.createElement('div');
content.className = 'hover';
var a=document.createElement('a');
a.href='#';
a.innerHTML='Click Me';
content.appendChild(a);
for (i = 1; i <= 2690; i += 1) {
square = document.createElement("div");
square.id = "square" + i;
square.classList.add("square");
text = document.createElement("h1");
text.innerHTML = i;
text.id = "text" + i;
square.appendChild(text);
container.appendChild(square);
document.getElementById('square'+i).appendChild(content.cloneNode(true));
}
You need to use cloneNode() method , which clones all attributes and values of specified element. A node can't be in two locations in the tree at once.
Here is a working solution: jsfiddle
Lukas. To achieve the function you were looking for using jQuery, I added an external resource:
https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js
and added this to the javascript:
$( ".square" ).append("<div class=\"hover\">Click Me</div>")
I hope this helps.
You can append the html in pure javascript like this
var squares = document.getElementsByClassName("square");
var str = '<div class="hover">Click Me </div>';
Array.prototype.forEach.call(squares, function(sqr, index)
{
sqr.innerHTML = sqr.innerHTML + str;
});
Working fiddle : https://fiddle.jshell.net/egxbhehu/
The append function should work.
Also, please note that <h1></h1> tag should be used only once per page. Consider using <span></span> and CSS to make it look like your current h1 tag.
You should use createDocumentFragment() to append multiple childs.
var i, square, text, hoverDiv, aHref, container = document.getElementById("square_container");
for (i = 1; i <= 4; i += 1) {
square = document.createElement("div");
square.id = "square" + i;
square.classList.add("square");
text = document.createElement("h1");
text.innerHTML = i;
text.id = "text" + i;
hoverDiv = document.createElement("div");
hoverDiv.classList.add("hover");
aHref = document.createElement("a");
aHref.href = "#";
aHref.innerHTML = "Click Me";
hoverDiv.appendChild(aHref);
var docFrag = document.createDocumentFragment();
docFrag.appendChild(text);
docFrag.appendChild(hoverDiv);
square.appendChild(docFrag);
container.appendChild(square);
}
I am trying to put an img element in a span element that I created dynamically with JavaScript. The problem is that the span element isn't showing in the DOM tree. However, the img elements are shown on the page and are nested in the div element (#playfield) that is hard coded in my html code. I really don't know what I'm doing wrong.
var playfield = document.getElementById("playfield");
var indexes = [0,1,2,3,4,5,6,7,8,9,10,11];
shuffle(indexes);
for (var i = 0; i < 12; i++) {
var vak1 = document.createElement("span");
var kaart1 = document.createElement("img");
var path1 = "img/kaart" + indexes[i] + ".png";
var klasse1 = "img" + indexes[i];
kaart1.setAttribute("src", "img/achterkant.png");
kaart1.setAttribute("class", klasse1);
kaart1.setAttribute("data-img", path1);
kaart1.setAttribute("height", "150");
kaart1.setAttribute("width", "150");
kaart1.setAttribute("data-turned","false");
playfield.appendChild(vak1.appendChild(kaart1));
}
playfield.appendChild(vak1.appendChild(kaart1)); Is the problem line. The result of vak1.appendChild(kaart1) is the appended child kaart1 - do these 2 operation separately:
vak1.appendChild(kaart1);
playfield.appendChild(vak1);
var playfield = document.getElementById("playfield");
var indexes = [0,1,2,3,4,5,6,7,8,9,10,11];
for (var i = 0; i < 12; i++) {
var vak1 = document.createElement("span");
var kaart1 = document.createElement("img");
var path1 = "img/kaart" + indexes[i] + ".png";
var klasse1 = "img" + indexes[i];
//kaart1.setAttribute("src", "img/achterkant.png");
kaart1.setAttribute("class", klasse1);
kaart1.setAttribute("data-img", path1);
kaart1.setAttribute("height", "150");
kaart1.setAttribute("width", "150");
kaart1.setAttribute("data-turned","false");
vak1.appendChild(kaart1)
playfield.appendChild(vak1);
}
Append to the first and then add that to the playfield.
You're adding the created <img> as a child to #playfield. If you want it in a <span>, you'll have to add it to the <span> and then add that <span> to #playfield.
Okay so instead of typing out a hundred div tags in the hmtl I would like to generate them in javascript and have them show on the page. Here is what I have, but it will not work.
var arry = {};
for(var i = 0; i<100; i++){
arry[i] = i;
}
for each (var x in arry){
var div = document.createElement('div');
div.id = x;
document.getElementById('body').appendChild(div);
}
body is not an id, it is a tag. you need
document.getElementsByTagName('body')[0].appendChild(div);
This will create one hundred divs, each with a text node inside containing the number of the div.
var body = document.querySelector('body');
for(var x = 0; x < 100; x++) {
var div = document.createElement("div");
var text = document.createTextNode(x);
div.appendChild(text);
body.appendChild(div);
}
Alternatively you can do this:
var divs = '';
for (var i = 1; i <= 100; i++) {
divs += '<div id="id_' + i + '">Div ' + i + '</div>';
}
document.write(divs);
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...