Добавить <span> теги к div с помощью Javascript

Question

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

У меня есть следующие:

document.querySelector('#output').innerHTML = 'Hi ' + name; 

И хотел бы, так или иначе, добавьте <span> теги вокруг name, используя выше. Я пытаюсь создать простой чат AI для удовольствия и хочу иметь возможность задуматься над некоторыми словами, которые ИИ говорит.

Answer 1

Просто добавьте пролеты в строке:

document.querySelector('#output').innerHTML = 'Hi <span>' + name + '</span>'; 

Answer 2

Если вы хотите сделать это программно создать свой срок с помощью JS.

var name = 'Asteria'; 
var x = document.createElement('span'); 
x.id = 'highlight'; 
x.innerText = name; 

document.querySelector('#output').innerHTML = 'Hi ' + x.outerHTML; 

и вы можете использовать CSS, чтобы выделить промежуток с ID используя

#highlight { color: red; } 

Надеется, что это помогает.