using .innerHTML in this way?

Question

While studying JS, I saw this three lines:

var firstItem = document.getElementById('one');

var itemContent = firstItem.innerHTML;

firstItem.innerHTML = '<a href=\"http://example.org\">'+itemCotent+'</a>';

Can I just put .innerHTML in first line? so that it becomes like this?

var firstItem = document.getElementById('one').innerHTML;

var itemContent = firstItem;

firstItem.innerHTML = '<a href=\"http://example.org\">'+itemContent+'</a>';

I am just new, so could anyone explain why if not? thank you.

Answer 1

What you're looking for is probably this? Probably the best way to shorten it.
I've also added in template literal syntax
You must set the property through a reference to an object, otherwise it will not affect the original object. Your second example will just assign firstItem with the innerHTML string.

var firstItem = document.getElementById('one');
firstItem.innerHTML = `http://example.org">${firstItem.innerHTML}`;
//firstItem.innerHTML = 'http://example.org\">'+firstItem.innerHTML+'';

<div id="one">blahblah</div>