Replace innerHTML in plain JS

Question

I want to remove everything except the img-element from the footer container:

<footer>
    <p>Some text</p>
    <img src="logo.jpg">
</footer>

In JQuery I would do this:

var logo = $('footer img');
$('footer').html(logo);

How do I do that in plain JS?

try using getElementByTagName....

Suchit kumar
– Suchit kumar

2015-05-08 08:41:29 +00:00
Commented May 8, 2015 at 8:41 — Suchit kumar
– Suchit kumar, Commented May 8, 2015 at 8:41

dsharew · Accepted Answer · 2015-05-08 08:48:27Z

3

How about this?

  document.getElementsByTagName("footer")[0].innerHTML =  
            document.getElementsByTagName("img")[0]

edited May 8, 2015 at 8:48

answered May 8, 2015 at 8:40

dsharew

10.7k6 gold badges55 silver badges76 bronze badges

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

1 Comment

ImreNagy Over a year ago

Is the innerHTML on the img element correct? I would assume you'd want the whole element and not only its contents.

Arun P Johny · Accepted Answer · 2015-05-08 08:46:37Z

2

Without recreating the original element, if you want

var footer = document.getElementsByTagName('footer')[0];
var img = footer.getElementsByTagName('img')[0];
footer.innerHTML = '';
footer.appendChild(img)

Demo: Fiddle

answered May 8, 2015 at 8:46

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Comments

user3125999 · Accepted Answer · 2015-05-08 08:49:10Z

1

You could use the querySelector() function. It is exactly the same as jquery's selector function.

var logo = document.querySelector("footer img");
var footer = document.querySelector('footer');
footer.innerHTML = "";
footer.appendChild(logo);

More information about querySelector in W3Schools.

answered May 8, 2015 at 8:49

user3125999

2015 silver badges15 bronze badges

2 Comments

user3848987 Over a year ago

but I guess querySelector is slower then getElementsByTagName, isn't it?

user3848987 Over a year ago

Have a look at this: jsperf.com/…

Mathew Thompson · Accepted Answer · 2015-05-08 08:58:48Z

1

That's not valid, you're setting the html of the footer to be the logo jQuery object? I think you mean the logo HTML.

You would do:

var footer = document.getElementsByTagName('footer')[0];
var logo = footer.getElementsByTagName('img')[0];

footer.innerHTML = logo.outerHTML;

edited May 8, 2015 at 8:58

answered May 8, 2015 at 8:41

Mathew Thompson

56.5k15 gold badges131 silver badges151 bronze badges

1 Comment

Mathew Thompson Over a year ago

@user3848987 Yep you're right, should be outerHTML I've fixed it :)

Radonirina Maminiaina · Accepted Answer · 2015-05-08 08:47:28Z

0

You can use this too:

var footer = document.querySelector("footer");
var replecedElement = document.querySelector("footer img");
footer.innerHTML = "";
footer.appendChild(replecedElement);

Demo: http://jsfiddle.net/t1qwn6bt/

answered May 8, 2015 at 8:47

Radonirina Maminiaina

7,0144 gold badges36 silver badges63 bronze badges

Collectives™ on Stack Overflow

Replace innerHTML in plain JS

5 Answers 5

1 Comment

Comments

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related