Append image using javascript attr src function

Question

I want to get the image src from a div with id post and want to append it inside a div with id show-image

Also I want to wrap the javascript in a function so that I can implement it in webpage

so far i have created this

var theDiv = document.getElementById("show-image");
var tubeimg = document.getElementById('post-img').getAttribute('src');
theDiv.innerHTML += "<img src=" +tubeimg+ " />";

for the Html coding

<div id='show-image'>
</div>
<div id='post'>
<div class='inner'>
<img id='post-img' src='http://3.bp.blogspot.com/-Sg5t3utxRzc/UwgyzbLVAAI/AAAAAAAAFBo/vYQX0Cphx8U/s1600/indian-bride.jpg'/>
</div>
</div

Right now I am using document.getElementById("img id").getAttribute('src'; but I want this

var post = document.getElementById("post"),
var tubeimg = post.documentgetElementByTagName("img").getAttribute('src');

But tis is not working I don't know where I am getting wrongc an anyone please fix this please

I want pure javascript no jquery

Amit Joki · Accepted Answer · 2014-04-18 11:26:22Z

2

Use

var tubeimg = document.getElementsByTagName("img")[0].getAttribute('src');

It returns a NodeList which you've to iterate.

answered Apr 18, 2014 at 11:26

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

adeneo · Accepted Answer · 2014-04-18 11:32:52Z

0

getElementsByTagName gets a nodeList, you need the first element in that nodeList

var post = document.getElementById("post"),
var tubeimg = post.getElementByTagName("img")[0].getAttribute('src');

querySelector has better support than getElementByTagName, so it would be easier to just do

var tubeimg = document.querySelector('#post img').src;

Which would give you

var theDiv  = document.getElementById("show-image");
var tubeimg = document.querySelector('#post img').src
var image   = document.createElement('img');

image.src = tubeimg;

theDiv.appendChild(image);

FIDDLE

edited Apr 18, 2014 at 11:32

answered Apr 18, 2014 at 11:27

adeneo

319k29 gold badges410 silver badges392 bronze badges

3 Comments

user3014202 Over a year ago

Can you help me further to wrap this java code inside function

adeneo Over a year ago

@user3014202 - Help you with what exactly ?

adeneo Over a year ago

@user3014202 - Feel free to accept one of the answers.

csuwldcat · Accepted Answer · 2014-04-18 12:05:03Z

0

If you wanted to get fancy:

document.getElementById('show-image').appendChild(
  new Image()
).src = document.querySelector('#post img').src;

OR

document.getElementById('show-image').innerHTML = '<img src="' + document.querySelector('#post img').src + '" />';

answered Apr 18, 2014 at 12:05

csuwldcat

8,3192 gold badges39 silver badges32 bronze badges

Collectives™ on Stack Overflow

Append image using javascript attr src function

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related