Как правильно присваивать переменную?

Складывается впечатление, что методы нельзя добавлять в переменную.

Методы можно добавлять в переменную, однако, в данном случае в коде нет методов.

innerHTML - это свойство, возвращающее строку.

возможно я не до конца понимаю особенности присваивания переменной.

Особенностей нет: присваивая что-то в переменную, никак не влияет на предыдущее значение переменной.

var a = {};
a = 'a';
a = 3;

Во всех трех случаях предыдущее значение теряется и никак не меняется.

Почему работает первый вариант?

В первом варианте: outputData.innerHTML = 'Введите значение';

Нет присваивания переменной. Есть изменение значения свойства объекта.

При этом, .innerHTML еще и особое свойство, которое разбирает переданную строку и генерирует нужный html, который затем и отображается.

querySelector возвращает ссылку на объект, а innerHTML - строка, базовые типы в js не ссылочные, поэтому когда вы приравниваете строке, то переменная будет типа string, а он базовый и ее изменение не будет менять ее в первоначальном месте. Например:

const simpleType = 'string' 
let simpleType2 = simpleType 
 
simpleType2 = 'another string' 
 
// should be false 
console.log(simpleType === simpleType2) 
 
const obj = { string: 'string' } 
const obj2 = obj 
 
obj2.string = 'another strig' 
 
// should be true 
console.log(obj.string === obj2.string)