This question already has answers here:
Programmatically change the src of an img tag
(9 answers)
Closed 6 years ago.
<div class="fruit" id="whole">
<img class="fruit1" />
<img class="fruit2" />
</div>
<script>
var img1=document.createElement("img");
img1.src="http://us.yimg.com/i/us/nws/weather/gr/32ds.png";
document.getElementById("whole").appendChild(img1);
</script>
I only know how to add <img> tag in the parent class, and output a image in it, like the code does.
However, I don't know how to output a image to the child class, i.e,"fruit1"
Are you trying to set the img src="" of .fruit1? If so you just need to set the src property after finding it
var fruit1image = document.getElementsByClassName("fruit1")[0];
fruit1image.src="http://us.yimg.com/i/us/nws/weather/gr/32ds.png";
Note that getElementsByClassName returns an array, so we need to grab the first (0th) element.
Related
This question already has answers here:
Get all Attributes from a HTML element with Javascript/jQuery
(20 answers)
Closed 2 years ago.
I have
<img alt="text" src="source" />
I'd like to get this alt to one var in JavaScript. It'll be better if it won't be necessary to use jQuery.
Please for help :)
You could do like this:
document.getElementById('imgId').getAttribute('alt')
can get any attribute by .getAttribute
i.e.
imgAlt.getAttribute("alt")
imgAlt.getAttribute("title")
const imgAlt = document.getElementById("myImg");
console.log(imgAlt.getAttribute("alt"));
<img id="myImg" alt="text" src="source" />
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I have added an id to all elements with a class of image using JS.
The images now have ids eg. image--1, image--2, etc
If I want to get the element by ID using var el = document.getElementById('image--1'); then I get null.
How can I get current DOM in pure JS?
You can use the setAttribute() method to reliably set the id of image elements, via vanillajs.
Something to also keep in mind here is that the image elements need to be defined and present in the DOM before your javascript executes.
With these two things in mind, consider the following code - you could do something along these lines to achieve what you're after;
<html>
<head>
</head>
<body>
<!-- DEFINE BEFORE SCRIPT -->
<img class="img" src="/yourimage0.jpg" />
<img class="img" src="/yourimage1.jpg" />
<!-- DEFINE SCRIPT AFTER IMAGE ELEMENTS -->
<script>
var id = 1;
// Use the querySelectorAll method to select collection of your
// image elements
for(var img of document.querySelectorAll(".img")) {
// Set the id attribute in this way, using the setAttribute method
img.setAttribute("id", "image--" + id);
id++;
}
// You can now access the element by id with the following
var el = document.getElementById('image--1');
</script>
</body>
</html>
This works. Please explain where your code differs
document.querySelectorAll(".img").forEach(function(img,i) {
img.id="image--"+i;
})
document.getElementById('image--1').src = "https://via.placeholder.com/350x150?text=Image1";
<img class="img" src="https://via.placeholder.com/350x150" />
<img class="img" src="https://via.placeholder.com/350x150" />
<img class="img" src="https://via.placeholder.com/350x150" />
Dynamically:
// create the images:
var container = document.getElementById("container");
for (var i=0;i<3;i++) {
var img = document.createElement("img");
img.src="https://via.placeholder.com/350x150";
img.classList.add("img");
container.appendChild(img);
}
document.querySelectorAll(".img").forEach(function(img,i) {
img.id="image--"+i; // makes more sense to do that in the creation part too
})
document.getElementById('image--1').src = "https://via.placeholder.com/350x150?text=Image1";
<div id="container"></div>
I guess you are using web frameworks like Vue.js or React.js, then this is because of virtual DOM, which means you can't get these elements before they are mounted to real DOM. If so, you should get these element in componentDidMount function.
This question already has answers here:
Remove all child elements of a DOM node in JavaScript
(37 answers)
How do I clear the content of a div using JavaScript? [closed]
(2 answers)
Closed 5 years ago.
I want to remove the everything under the classname: social-share using JavaScript
HTML: This is what it looks like when I grab the code from chrome inspector.
<div class="social-share">
[shareaholic app="share_buttons" id="26444890"]
</div>
HTML: This is what exactly looks like inside the chrome inspector
<div class="social-share">
"
[shareaholic app="share_buttons" id="26444890"]
" == $0
</div>
You can use innerHTML to clear the contents of the element after it has been selected:
// select element with class 'social-share:
var social_share = document.querySelector('.social-share');
// Set it's contents to an empty string
social_share.innerHTML = '';
$('.social-share').empty();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="social-share"> content
<div>content</div>
</div>
Jquery empty() might be help you. It will remove every thing inside social-share class
This question already has answers here:
jQuery: How to get the value of an html attribute?
(6 answers)
Closed 7 years ago.
My my example below I've created an attribute called 'filters'. How can i get the attributes values using jquery? which would be games, vfx, video?
<div class="portfolio-item" filters="games vfx video">
<p>This is a test</p>
</div>
Just do :
$('.portfolio-item') // use class selector to target the class 'portfolio-item'
.attr('filters'); // This would give you the value of the attribute 'filters'
As pointed by others, you should use data attributes ( as supported by jquery 1.10 or higher ) for consistency with custom attributes:
<div class="portfolio-item" data-filters="games vfx video">
and extract its value : $('.portfolio-item').data('filters');
This question already has answers here:
Selecting element by data attribute with jQuery
(12 answers)
Closed 8 years ago.
Assuming i have a dvMainDiv as shown bellow with multiple children of type divs aswel. Now in my software the children have been added programmatically. Assuming the html is as shown below, how do get a child dive with a specific data-id.
<div id="dvMainDiv" class="dvMainDiv">
<div id="dvChildDiv" class="dvChildDiv" data-id="1">
<p>
some text
<p>
</div>
<div id="dvChildDiv" class="dvChildDiv" data-id="2">
<p>
some text 2
<p>
</div>
</div>
Say for instance, i want to get only the div with data-id of 1 and not 2, how do i do this in jquery.
for your code you would use the following:
$('*[data-id="1"]');
See http://jsfiddle.net/bgqd8xe6/
Edit to use a variable for the data-id use:
$('*[data-id="' + test + '1"]');
Note test must be a string