I'm trying to make a script which will change the content of every occurence like this:
<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>
there's many of those^
so far, this is the code I'm trying to make use of:
var elements = document.querySelectorAll('column-1');
for ( var i=elements.length; i--; ) {
elements[ i ].InnerHTML = "test";
}
but this isn't working, and I'm really just trying to piece together some code that will replace the content of the #2 column-1 of every <div id="random numbers">
I appreciate any help here, thanks in advance
There are two problems with your above code. First, your .querySelectorAll() should be targeting the class; you need to specify the full stop. Second, the i in .innerHTML needs to be lowercase.
After these two bugs have been fixed, you can only apply the change to every second element by running a condition based on a modulo of 2 using i % 2 as follows:
var elements = document.querySelectorAll('.column-1');
for (var i = 0; i < elements.length; i++) {
if (i % 2) {
elements[i].innerHTML = "OVERRIDDEN";
}
}
<div id="random numbers">
<div class="column-1">Should STAY</div>
<div class="column-1">Should CHANGE</div>
<div class="column-1">Should STAY</div>
</div>
If you're specifically trying to target the <a> tags, you can do that directly with querySelectorAll('.column-1 a') itself, using .outerHTML if you want to replace the <a> tag itself. Note that this doesn't require a conditional:
var elements = document.querySelectorAll('.column-1 a');
for (var i = 0; i < elements.length; i++) {
elements[i].outerHTML = "OVERRIDDEN";
}
<div id="random numbers">
<div class="column-1">Should STAY</div>
<div class="column-1">Should CHANGE</div>
<div class="column-1">Should STAY</div>
</div>
Hope this helps! :)
Related
I have this HTML code (and the number of components that I want to edit it's variable, it could be 3 or 20).
I have created a small example with similar scenario on my website
As you can see my script is able to edit the father div and add the classname. Same for firstchild.
I would like to edit all divs inside firstchild but not the immediately div, it has to be two inside.
Any ideas why my code is not working on the last part?
Thanks.
// WORKS OK
var firstc = document.getElementById('father');
firstc.classList.add("father-class");
firstc.children[0].children[0].children[0].setAttribute("id", "firstchild"); // WORKS OK
var second = document.getElementById('firstchild');
second.classList.add("child-class");
// NOT WORKING
var grandchildren = second.children[0].children[0].children[0];
for (let z = 0; z < grandchildren.length; z++) {
grandchildren[z].classList.add("slide");
}
<div id="father">
<div>
<div>
<div id="firstchild">
<div>
<div>
<div class="random63637236">
<li>1</li>
</div>
<div class="generic">
<li>2</li>
</div>
<div class="italy_gdgd">
<li>3</li>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
the problem in your code is the last children[0]. you are selecting only the first div, it's not an array. Fix that line and everything will work
var grandchildren = second.children[0].children[0].children;
As a side note: if for some reason the first or the second .children[0] are undefined you will get an error.
A better approach is to use querySelectorAll which returns an array;
if your array it is empty, nothing happens.
second.querySelectorAll('#firstchild > div > div > div')
.forEach(el => el.classList.add('slide'))
How can you replace HTML tag with all tags branching inside using Javascript with other HTML code?
example:
<div class="a">
<div class="sub-a1">
<div class="sub-a12">
</div>
</div>
<div class="sub-a2">
<div class="sub-b">
</div>
</div>
I wanna replace all tags from tag div class 'a' including all sub nodes with another code.
is that's possible?
please help me.
const target = document.querySelector(".a");
target.innerHTML = //place your html here as string
Yes, this is possible. If you want to keep the div.a elements and just change the "subnodes" you have to use innerHTML in stead of outerHTML.
const divs = [...document.getElementsByClassName("a")]; //make a copy of the HTML collection so that they can be removed without being removed in the array
const newElement = "<h1>Replaced Element</h1>"; //this is your replacement element
for (let i = 0; i < divs.length; i++) { // loop through all the divs
divs[i].outerHTML = newElement; // set the outer html for the div to the replacement elemzent
}
You can do with .replaceWith() with a valid HTML code.
function replace() {
var para = document.createElement("P"); // Create a <p> element
para.innerText = "This is a paragraph"; // Insert text
document.querySelector(".a").replaceWith(para);
}
<div class="a">
<div class="sub-a1">
<div class="sub-a12">
<h4>Sample content1</h4>
</div>
</div>
<div class="sub-a2">
<div class="sub-b">
<h4>Sample content2</h4>
</div>
</div>
</div>
<button onclick="replace();"/>Click to Replace</button>
just wondering what went wrong.. i have two div named click_1 and click_2.. and i want to toggle the div named hide corresponding with their numbers.. lets say click_1 with hide_1 and click_2 with hide_2.. but when i ran the code only click_1 is functioning .. what seems to be wrong... newbie here.. recently learned jquery
<div id='click_1'>
<div id='hide_1'></div>
</div>
<div id='click_2'>
<div id='hide_2'></div>
</div>
<script>
function toggle_div(id_A,id_B){
for(var i=0; i<3; i++){
var new_A = id_A + i;
var new_B = id_B + i;
$(new_A).click(function(){
$(new_B).toggle();
});
}
}
toggle_div('click_','hide_');
</script>
The issue is because your id selectors are missing the # prefix:
toggle_div('#click_', '#hide_');
However you should note that you will also need to use a closure for this pattern to work otherwise the new_B element will always be the last one referenced in the for loop.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='click_1'>
click 1
<div id='hide_1'>hide 1</div>
</div>
<div id='click_2'>
click 2
<div id='hide_2'>hide 2</div>
</div>
<script>
function toggle_div(id_A, id_B) {
for (var i = 1; i < 3; i++) {
var new_A = id_A + i;
var new_B = id_B + i;
(function(a, b) {
$(a).click(function() {
$(b).toggle();
})
})(new_A, new_B);
}
}
toggle_div('#click_', '#hide_');
</script>
As you can see this is very verbose, rather complicated and hardly extensible. A much better approach is to use generic classes and DOM traversal to repeat the same logic on common HTML structures.
To achieve this put common classes on the elements to be clicked and the elements to toggle. Then in the single click event handler you can use the this keyword to reference the element which was clicked, then find() the element to toggle within that. Something like this:
$(function() {
$('.click').click(function() {
$(this).find('.hide').toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="click">
click 1
<div class="hide">hide 1</div>
</div>
<div class="click">
click 2
<div class="hide">hide 2</div>
</div>
<div class="click">
click 3
<div class="hide">hide 3</div>
</div>
Also note that this pattern means that you can have an infinite number of .click elements with matching .hide content without ever needing to update your JS code.
It is better not to use for loop for click event ! If you have id like that your can handle by that clicked id split ....
$("[id^='click_']").on("click",function () {
$('#hide_'+this.id.split('_')[1]).toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='click_1'>
Click1
<div id='hide_1'>hide1</div>
</div>
<div id='click_2'>
Click2
<div id='hide_2'>hide2</div>
</div>
I'm trying to create a div which should replace the select element (because the real one is not necessary in that case) and I try to get the data-select attribute of each option (which represented by an a tag) but I probably do something wrong and I'm getting null. that's my code - HTML:
<div class="select" data-after="C">
<i data-select-value="">Date & Time</i>
<div class="options">
Date & Time
Alphabetical
Modified
</div>
</div>
<div class="select" data-after="C">
<i data-select-value="">Delete</i>
<div class="options">
Delete
Edit
Unpublish
</div>
</div>
JS:
var selectbox = document.getElementsByClassName('select');
for(var i = 0; i < selectbox.length; i++) {
selectbox[i].onclick = function() {
var elechild = this.childNodes;
var x = 0;
for(x; x < elechild.length; x++) {
elechild[x].onclick = function() {
console.log(this.getAttribute('data-select'));
}
}
}
}
How can I solve this and get each attribute (please, no jQuery)?
(btw please excuse my english if I had any misspellings)
Thank you very much!
Basically, you can get all elements using querySelectorAll in javascript. https://developer.mozilla.org/de/docs/Web/API/Document/querySelectorAll
Try this:
var selectors = document.querySelectorAll('.options a');
for (var x = 0; x < selectors.length; x++) {
selectors[x].onclick = function() {
console.log(this.getAttribute('data-select'));
}
}
<div class="select" data-after="C">
<i data-select-value="">Date & Time</i>
<div class="options">
Date & Time
Alphabetical
Modified
</div>
</div>
<div class="select" data-after="C">
<i data-select-value="">Delete</i>
<div class="options">
Delete
Edit
Unpublish
</div>
</div>
Use this:
var options = document.querySelectorAll('.select .options a');
for (var x = 0; x < options.length; x++) {
options[x].onclick = function() {
console.log(this.getAttribute('data-select'));
}
}
You really had overthought that a bit. You only need to gather up the links and loop through them. You might have noticed that in your code, you had to click twice for anything to happen - - that was because you were applying a click event to ALL the children of the select div elements as well as the select div elements, which included the option div.
Also, it's better to not use the onXyz event properties of DOM objects and instead use the W3C DOM Event standard, which uses addEventListener as an event callback registration method. This allows for a more standard and more robust event registration / de-registration model.
// Just get the anchors that are children of your options element:
var selectAnchors = document.querySelectorAll(".options a");
// Just loop through the anchors. No need to loop the divs
for(var x = 0; x < selectAnchors.length; x++) {
selectAnchors[x].addEventListener("click", function() {
console.log(this.getAttribute('data-select'));
});
}
<div class="select" data-after="C">
<i data-select-value="">Date & Time</i>
<div class="options">
Date & Time
Alphabetical
Modified
</div>
</div>
<div class="select" data-after="C">
<i data-select-value="">Delete</i>
<div class="options">
Delete
Edit
Unpublish
</div>
</div>
In my application I'm generating HTML with a Go template. I pass a list to a template that resembles this:
<div id="myList">
{{ Loop }}
<div id="{{.loopIndex}}">
{{ End loop }}
</div>
I now want to access the individual children in JavaScript according to ID. These are not 'elements', so I can't use the HTML DOM getAttribute() method, or access element.id.
I want to do something like this:
var listElement = document.getElementById("myList");
var listElements = listElement.childNodes;
for (i=0; i < listElements.length; i++) {
alert(listElements[i].id);
}
How would I do this? Is there any way to convert the objects in my list to DOM Elements? The example I gave is a lot simpler than my actual code, but it would follow the same approach, I imagine.
You could use getElementsByTagName:
var listElement = document.getElementById("myList");
var listElements = listElement.getElementsByTagName('div'); // could also use listElement.children;
for (i = 0; i < listElements.length; i++) {
alert(listElements[i].id);
}
<div id="myList">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
</div>
Or just children:
var listElements = listElement.children;
After retrieving the list element with document.getElementById('myList') and assigning it to list, you can retrieve its children with list.getElementById(n) where n is the id. (Or you could continue to use document.getElementById if the element IDs are unique in the document, as they are supposed to be.)
Demonstration:
function print(s) {
document.write(s + '<br />');
}
var list = document.getElementById('myList');
for (var i = 1; i <= 3; ++i) {
var child = list.getElementById(i);
print(child.innerHTML);
}
<div id="myList">
<div id="1"> one </div>
<div id="2"> two </div>
<div id="3"> three </div>
</div>
You can try it with document.querySelector, works fine with all browsers and ie 9
See a demo on jsfiddle
var listItems = document.querySelectorAll("#myList .list-item");
for(var i=0; i < listItems.length; i++){
console.info(listItems[i].id);
}
<div id="myList">
<div class="list-item" id="1" >item 1</div>
<div class="list-item" id="2" >item 2</div>
<div class="list-item" id="3" >item 3</div>
</div>