There are quite a few similar questions, but none are quite what I need nor can I fiddle them around to fit what I'm trying to do.
I have the following:
document.querySelector('#output').innerHTML = 'Hi ' + name;
And would like to, somehow, add the <span> tags around name using the above. I'm attempting to create a simple chat AI for fun, and want to be able to hightlight certain words that the AI is saying.
You can also try by storing the node and append the child .
var First;
First=document.getElementById("basic").value;
var v = document.createElement("p");
v.appendChild(document.createTextNode(First));
document.getElementById("fd").appendChild(v);
var edv=document.getElementById("plot"); var edp=document.createElement("span"); edv.appendChild(edp); edp.innerHTML="Hello world";If you want some programatically, if you are looking for some span simply appearing in the screen:
var esp=document.createElement("span");
document.getElementById("mydiv").appendChild(esp);
esp.innerHTML="This is my span";
If you are looking to do it programmatically, create your span using JS.
var name = 'Asteria';
var x = document.createElement('span');
x.id = 'highlight';
x.innerText = name;
document.querySelector('#output').innerHTML = 'Hi ' + x.outerHTML;
and you can use CSS to highlight the span with ID using
#highlight { color: red; }
Hope this helps.
document.querySelector('#output').innerHTML = 'Hi <span>' + name + "</span>";