CODEWITHSUNDEEP
javascript
Asteria
Asteria

Reputation: 330

Add <span> tags to div using Javascript

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.

Upvotes: 3

Views: 15808

Answers (4)

Brethlosze
Brethlosze

Reputation: 1618

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";

Upvotes: 1

champion-runner
champion-runner

Reputation: 1647

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);

Upvotes: 4

Srikanth Rayabhagi
Srikanth Rayabhagi

Reputation: 1443

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.

Upvotes: 0

Bic
Bic

Reputation: 3134

Just add the spans in your string:

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

Upvotes: 5

Related Questions