I have multiple instances of a div with an id of "myDiv" on a page. I want to replace the contents of these divs. When I use this javascript:
function replaceContent(id, content) {
var container = document.getElementById(id);
container.innerHTML = content;
}
replaceContent('myDiv', 'hello there');
<div id="myDiv"></div>
<div id="myDiv"></div>
<div id="myDiv"></div>
It only replaces the content inside one of those divs and not all of them. If I use the .html() function of jquery instead, it replaces the contents of all divs. Is there any way I can get the above js to work in the same way?
id values must be unique - you can't have more than one id with the same name and update all of them.
I have multiple instances of a div with an id of "myDiv" on a page.
This is where you're doing it wrong. You cannot assign an ID to multiple elements on a page - it has to be unique.
It only replaces the content inside one of those divs and not all of them.
This happens because getElementById() returns only the first-matched element in case multiple such elements are matched.
To solve this, assign a class instead of an ID to the divs you want to target, and if you can use jQuery, use this instead (assuming class="myDiv"):
function replaceContent(className, content) {
$('div.' + className).html(content);
}
// This appends className so the selector becomes $('div.myDiv')
replaceContent('myDiv', 'hello there');
IDs have to be unique. You can use the same class name for all divs and then use a css selector.
<div id="div1" class="mydivs">blah</div>
<div id="div2" class="mydivs">blah123</div>
For e.g. In JQuery, you could do:
$('.mydivs').html("whatever");
Related
<div id="#("Bottomgrid)" class="dgd2"></div>
var element = document.getElementById("#Bottomgrid");
element.empty();
$('.dgd2').empty()
Instead of deleting only Bottom grid its also removing other Div present in the screen.
jQuery .remove() will remove the set of matched elements from the DOM.
While jQuery .empty() will remove all child nodes of the set of matched elements from the DOM.
Considering if you have your HTML as below :
<div id="Bottomgrid" class="dgd2"></div>
and you want to remove div with id="Bottomgrid"
Then your javascript code will be :
$("#Bottomgrid").remove();
//This is not required as far as I see
//$('.dgd2').empty()
If you have a HTML structure like this:
<div class="holder">
<div id="item1">Hey</div>
</div>
you can simply just use this pure JavaScript code to remove the "item1" element:
var element = document.getElementById("item1");
element.parentNode.removeChild(element);
.empty() doesn't remove element it only removes elements children. use $('#Bottomgrid').remove()
Javascript :
document.getElementById("Bottomgrid").remove();
Jquery:
$( "#Bottomgrid" ).remove();
you should give the div name properly like Below how I am writing the Id. also you need to check properly which div you are going to delete. Because if a nested div present in your page and you are going to delete the div which is having all the child div inside that , then all respective div going to be deleted .
Html
<div id="bottomgridDiv" class="dgd2">
<div id="parentDiv" class="dgd2">
<div id="childDiv" class="dgd2">
</div>
</div>
</div>
Javascript
var element = document.getElementById("#bottomgridDiv");
In JQuery:-
$("#bottomgridDiv").remove();
So now if you wants to delete the bottomgridDiv then what ever the div present inside this is going to delete.
I have the following markup
<div class = "general">
<div id ="custom"></div>
</div>
How to change id = "custom" in all <div> with class="general" from href on page using jQuery?
You can try this:
$("div.general").each(function() {
$(this).children("div#custom").text($(this).children("a").attr("href"));
});
If I understand you correctly, you want to iterate through all div.generals, and change the text of each child div#custom to the href of the child a.
See a working example on JSfiddle.
Also, another tip is to avoid using multiple elements with the same id. In your code you have a <div> with id="custom". You also say that the div.general appears multiple times — therefore, the id "custom" will appear multiple times. This is bad practice. I suggest that you change id to class.
You need to loop through all div.general and replace the id attribute of div#custom to whatever is there as the anchors href property. The following code will work:
$(".general").each(function(){
$(this).find("#custom").attr("id", $(this).find("a").attr("href").replace("#", ""));
})
Here the .find() will dig out elements from any depth inside the parent. If you are sure about the DOM position of the elements, you can change the .find() to .children()
I need to know how i can add some javascript to add value inside text like below
The original div in HTML code like
<div> Text </div>
I need the some way to put an value inside the div appear in source like below
<div data-texe> Text </div>
I have try but its new for me
<script>
var div = document.getElementByDIV;
div.innerDIV += 'data-texe';
</script>
You want to set attribute?
var div = document.getElementById('yourid');
div.setAttribute('data','texe')
You will need to first find a way to identify your <div> elements, either with a unique ID or a class name. In this example I chose a unique ID:
<div id="test">Text</div>
If you want to add your data-texe attribute to all <div>s, you could use document.getElementsByTagName() and then loop over the results.
But let's stick to altering just one element for this example:
<script type="text/javascript">
// getElementByDIV is obviously not a valid function, so let's use
// one that finds an element by its ID:
var div = document.getElementById('test');
// The setAttribute function lets you add an attribute to the element
// The first parameter is the attribute name and the second is its value
// Attributes with no values are implicitly defined as empty string
div.setAttribute('data-texe', '');
</script>
as seen in this Fiddle i want to change the value of another div using the unique id of one div but i dont know how to make that possible it only works for the first div not the second one
Code:
html
<div class="a" data-u="1399037905154655004">a</div>
<div class="a" data-u="1399037905154655009">b</div>
<br>
<div class="test" id="id1399037905154655004">ini text 1</div>
<div class="test" id="id1399037905154655009">ini text 2</div>
Javascript
var id=$(".a").attr('data-u');//get the id
$("#id"+id).text("23456");//using the unique id change the text
Note:I donot want to use any form of click event
You need .each() with .data(), As .data() is to get data-attribute of the element
$(".a").each(function(){
var id = $(this).data('u');
$("#id"+id).text("23456") // Will set same text for both divs
});
As per your comment
If you prefer .attr() then try this
var id = $(this).attr('data-u'); // .attr instead of .data()
Note: If you're using data-attr anywhere in your mark-up, it is recommended to use .data() instead of .attr() to get that attribute.
Fiddle
Demo With .attr()
You're using a class, to target your divs, so your selector is returning more than one element, you need to loop:
$(".a").each(function(){
var id = $(this).data('u');
$("#id"+id).text("23456")
});
var id = $(".a").map(function(){return $(this).attr("data-u");}).get();
$("#id"+id[0]).text("23456");
$("#id"+id[1]).text("23456");
I have the following code:
$('#select_albums').load(document.location.href + "&action=get_albums");
But this is only replacing only the first found div with the id #select_albums from DOM. How do I replace all divs with an id?
Every item in the DOM has a unique id. If you want to act on many divs at the same time use a class $(".myclass") or a tag $("div") selector.
Yes because by definition an element ID can only appear once on a page. If you have more elements use a class instead.
$('.select_albums').load(document.location.href + "&action=get_albums");
With
<div class="select_albums"></div>
<div class="select_albums"></div>
id's must be unique, try using a class instead such as $(".albums").load...
ids must be unique