<div id="random numbers">
<div class="column-1"></div>
<div class="column-1">this value I want to change</div>
<div class="column-1"></div>
</div>
from earlier advice, I have this code:
var elements = document.querySelectorAll('.column-1 a');
for (var i = 0; i < elements.length; i++) {
elements[i].outerHTML = "OVERRIDDEN";
}
the issue I'm having is that this replaces each <a inside each div <div id="random numbers">), while I would like it only to replace the second column-1 inside each random numbers div.
thank you in advance!
document.querySelectorAll('.column-1 a')[1].outerHTML = "OVERRIDDEN";
Just work with i
var elements = document.querySelectorAll('.column-1');
for (var i = 0; i < elements.length; i++) {
if(i%2) { // override 2nd, 4th, etc.
elements[i].outerHTML = "OVERRIDDEN";
}
}
https://jsfiddle.net/ishukshin/av6t6kxz/
Related
I have a loop to duplicate an array, and another to add copy in another div.
Both loop work good but original element are deleted, someone can explain me why?
And how can i fixe it? Thank you!
var mesElements = document.querySelectorAll('.element');
var catchCopy = document.querySelector('.parent_copy');
var mesElementsCopie = []
for(var j = 0; j < mesElements.length; ++j){
mesElementsCopie[j] = mesElements[j];
}
for(var k = 0; k < mesElements.length; ++k){
catchCopy.appendChild(mesElementsCopie[k]);
}
<div class="parent_element" style="background-color: red;">
<div class="element">text</div>
<div class="element">text</div>
<div class="element">text</div>
</div>
<div class="parent_copy" style="background-color: green;"></div>
On this line, you do not copy the node, but rather you create two references to the same DOM node:
mesElementsCopie[j] = mesElements[j];
You should use the cloneNode() method:
mesElementsCopie[j] = mesElements[j].cloneNode(true);
Here's the fixed code:
var mesElements = document.querySelectorAll('.element');
var catchCopy = document.querySelector('.parent_copy');
var mesElementsCopie = []
for(var j = 0; j < mesElements.length; ++j){
mesElementsCopie[j] = mesElements[j].cloneNode(true);
}
for(var k = 0; k < mesElements.length; ++k){
catchCopy.appendChild(mesElementsCopie[k]);
}
<div class="parent_element" style="background-color: red;">
<div class="element">text</div>
<div class="element">text</div>
<div class="element">text</div>
</div>
<div class="parent_copy" style="background-color: green;"></div>
You were adding the same elements you had grabbed from the parent element, so it was just moving them to the parent copy. Use .cloneNode(true) to make sure you're not using the same element.
I am trying to find a specific div by its inner text to adding subsequently a class. How can i do it?
Example input
<div>First</div>
<div>Second</div>
<div>Third</div>
Desired output
<div>First</div>
<div class="check">Second</div>
<div>Third</div>
I hope I have been helpful
var x = document.getElementsByTagName("div");
for ( var i = 0; i < x.length; i++) {
var y = x[i].innerHTML.indexOf('Second');
if (y>-1) {
x[i].setAttribute("class", "check");
}
}
I am trying to append new div elements to existing divs by using document.getElementsByTagName("div"), converting it to an array, then using appendChild on it. However, when I inspect the frame source of this jsfiddle, it doesn't seem to append it to the divs. It is just:
<body>
<div id="1">
<div id="2">
test
</div>
</div>
Instead of the expected result:
<body>
<div id="1">
<div id="2">
test
</div><div></div>
</div><div></div>
https://jsfiddle.net/ng58e87w/
var allDivs = [].slice.call(document.getElementsByTagName("div"));
for (var i = 0; i < allDivs.length; i++) {
var newDiv = document.createElement("div");
allDivs[i].appendChild(newDiv);
console.log(allDivs[i]);
}
I can't comment, but I believe you are just creating empty divs and adding nothing to them. They show up created when you inspect element in the jsfiddle. I also set their text to something and it seemed to work.
var allDivs = [].slice.call(document.getElementsByTagName("div"));
for (var i = 0; i < allDivs.length; i++) {
var newDiv = document.createElement("div");
newDiv.innerHTML = "Hidden Div?";
allDivs[i].appendChild(newDiv);
console.log(allDivs[i]);
}
Use .after() instead of .appendChild().
var words = ['apple','banana','cake'];
console.log(words[0]);
object1 = {
name:'frank',
greet:function(){
alert('hello '+this.name)
}
};
object2 = {
name:'andy'
};
// Note that object2 has no greet method.
// But we may "borrow" from object1:
object1.greet.call(object2);
/*
var divs = [];
var arr = Array.prototype.slice.call( document.getElementsByTagName("div") );
for(var i = 0; i < arr.length; i++) {
//do something to each div like
var div = document.createElement("div");
arr[i].appendChild(div);
}
*/
var allDivs = [].slice.call(document.getElementsByTagName("div"));
for (var i = 0; i < allDivs.length; i++) {
var newDiv = document.createElement("div");
allDivs[i].after(newDiv);
console.log(allDivs[i]);
}
<div id="1">
<div id="2">
test
</div>
</div>
I have got a task to set the menu as selected. For that I use dynamic id.
So I want to increment it with respect to the selection
My code is
<div class="menuHeader ui-corner-top" id="menu"+ i>
<span>Home</span>
</div>
<div class="menuHeader ui-corner-top" id="menu"+ i>
<span>New Transaction</span>
</div>
<div class="menuHeader ui-corner-top" id="menu"+ i>
<span>Portfolio</span>
</div>
javascript is
$(document).ready(function () {
alert(document.URL);
var list = $("#menu");
for (var i = 1; i <= list.length; i++) {
list[i].innerHTML = i;
}
var str = document.URL.toLowerCase().indexOf("portfolio/index");
alert(str);
if (str >= 0) {
$('#menu').addClass("menuHeaderActive");
}
});
How can I do this?
var i=0;
$('.menuHeader').each(function(){
i++;
var newID='menu'+i;
$(this).attr('id',newID);
$(this).val(i);
});
This is the way to do it with Jquery
val elementList = $(".menu");
for (var i = 1; i <= list.length; i++) {
elementList[i].attr("id", "menu" + i);
}
Just use a class name instead of an id, you will be able to reuse the code you have just added but in this way.
var list = $(".menu");
One advice, don't do the highlighting of the item menu with javascript, do it server-side, and you can add the "activating" class directly in the HTML of the LI.
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)
}