/    Sign up×
Community /Pin to ProfileBookmark

getElementById – getElementsByClassname

I need help adjusting a javascript that places an image tag dynamically inside another tag.

This is what I’m using:

`<p id=”placed-image”></p>

<script type=”text/javascript”>
var img = document.createElement(“img”);
img.src = “https://pbs.twimg.com/profile_images/2752273314/67f8ba9913853620ea03de799bb50278.jpeg“;
img.alt = “Adorable Kitten”;
var src = document.getElementById(“placed-image”);
src.appendChild(img);
</script>
`
It works great but I need to use a “class” and not an “id” for the container tag.

I’ve tried replacing “getElementById” with “getElementsByClassname” but it doesn’t work.

Any help would be appreciated.
Thank you.

to post a comment
JavaScript

9 Comments(s)

Copy linkTweet thisAlerts:
@SempervivumDec 13.2019 — I've tried replacing "getElementById" with "getElementsByClassname" but it doesn't work.[/quote]
The reason is that getElementsByClassname doesn't return a single element like getElementById does but a node list. You can either adjust your code like this:

`var src = document.getElementsByClassname ("placed-image")[0];</C><br/>
or like this:<br/>
<C>
var src = document.querySelector(".placed-image");`
Copy linkTweet thisAlerts:
@ptrautweinauthorDec 13.2019 — @Sempervivum#1611826

Your second suggestion worked. (the first didn't)

My script ended up like this:

&lt;p class="placed-image"&gt;&lt;/p&gt;

&lt;script type="text/javascript"&gt;<br/>
var img = document.createElement("img");<br/>
img.src = "https://pbs.twimg.com/profile_images/2752273314/67f8ba9913853620ea03de799bb50278.jpeg";<br/>
img.alt = "Kitten";<br/>
var src = document.querySelector(".placed-image");<br/>
src.appendChild(img);<br/>
&lt;/script&gt;


I'm up and running. Thanks for the help!
Copy linkTweet thisAlerts:
@SempervivumDec 13.2019 — You're welcome. The first code didn't work as the function name wasn't spelled correctly. Should read `getElementsByClassName `.
Copy linkTweet thisAlerts:
@ptrautweinauthorDec 13.2019 — @Sempervivum#1611829

Brilliant, both options are working.

However, I've run into a glitch. When I add a second paragraph with the same class, only the first paragraph displays the image, the second doesn't. This is one of the reasons I needed to use a class rather than an id. I need the image -with accompanying text- to display in various places throughout the page.
Copy linkTweet thisAlerts:
@SempervivumDec 13.2019 — That's easy, you simply need to use querySelector[b]All[/b] and loop through the elements like this:
var img = document.createElement("img");
img.src = "https://pbs.twimg.com/profile_images/2752273314/67f8ba9913853620ea03de799bb50278.jpeg";
img.alt = "Kitten";
var srcs = document.querySelectorAll(".placed-image");
for (var i = 0; i &lt; srcs.length; i++) {
srcs[i].appendChild(img);
}
Copy linkTweet thisAlerts:
@ptrautweinauthorDec 13.2019 — @Sempervivum#1611832

Hm. That switched the image from the first tag to the second - or last instance, if I add more than two.

So the image is still only displayed once.

I appreciate your time.
Copy linkTweet thisAlerts:
@SempervivumDec 13.2019 — I see, we have to create a new image for each destination. Try this:
var srcs = document.querySelectorAll(".placed-image");
for (var i = 0; i &lt; srcs.length; i++) {
var img = document.createElement("img");
img.src = "https://pbs.twimg.com/profile_images/2752273314/67f8ba9913853620ea03de799bb50278.jpeg";
img.alt = "Kitten";
srcs[i].appendChild(img);
}
Copy linkTweet thisAlerts:
@ptrautweinauthorDec 13.2019 — @Sempervivum#1611834

Yes! It's working. Multiple images and multiple instances. **Thank you so much for your help.**

FYI - in case you were wondering why I wouldn't just add an image tag to the page. It's not about kitties. I'm trying to be clever with a CMS. I need to be able to add accessible icons to links to documents and I have a slew of impatient content editors. When they have to add a dozen or so PDF or Word files to their pages, they are not going to go through the trouble of adding an image for each link. However, the WYSIWIG will allow them to add a CSS class to the link tag, and I can add Javascript to the master template. This should make it easier all around.

Final code:


&lt;p&gt;&lt;a href="#" class="pdflink"&gt;Link to PDF File&lt;/a&gt;&lt;/p&gt;<br/>
&lt;p&gt;&lt;a href="#" class="wordlink"&gt;Link to MS Word File&lt;/a&gt;&lt;/p&gt;<br/>
&lt;p&gt;&lt;a href="#" class="pdflink"&gt;Link to PDF File&lt;/a&gt;&lt;/p&gt;<br/>
&lt;p&gt;&lt;a href="#" class="wordlink"&gt;Link to MS Word File&lt;/a&gt;&lt;/p&gt;



var srcs = document.querySelectorAll(".pdflink");<br/>
for (var i = 0; i &lt; srcs.length; i++) {<br/>
var img = document.createElement("img");<br/>
img.src = "pdf.png";<br/>
img.alt = "PDF File";<br/>
srcs[i].appendChild(img);<br/>
}



var srcs = document.querySelectorAll(".wordlink");<br/>
for (var i = 0; i &lt; srcs.length; i++) {<br/>
var img = document.createElement("img");<br/>
img.src = "icdocx.png";<br/>
img.alt = "MS Word File";<br/>
srcs[i].appendChild(img);<br/>
}
Copy linkTweet thisAlerts:
@SempervivumDec 13.2019 — Fine that it works now! And thanks for the information about the background of this subject.
×

Success!

Help @ptrautwein spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 3.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,

tipper: Anonymous,
tipped: article
amount: 10 SATS,
)...