0

I have some HTML and when a function is called, I want to change to text in a div that uses span. The idea is to be a sort of customized alert. I'm trying to use .innerHTML, but what I want to change has both quotations and span. Is there a way that I can get this to update?

Current HTML:

<div id="messageBox" class="messageBox">
     <div id="picture"></div>
     <div id="messageArea">"I need to update this <span class="keyWord">code</span> and keep the 
          quotations and keywords!"
     </div>
</div>

This shows a box with a picture and

"I need to update this code and keep the quotations and the keywords!"

The current javascript that I have is:

alertChange = document.getElementById("messageArea");
alertChange.innerHTML = ""This <span class="keyWord">code</span> needs to change!"";

It won't allow me to add the extra quotations or the span element.

The resulting text should be

"This code needs to change!"

Stacey
  • 63
  • 1
  • 9
  • The [Escape quotes in JavaScript](https://stackoverflow.com/questions/2004168/escape-quotes-in-javascript) is not correct. That one is about escaping quotes in the markup (attributes) not about escaping quotes to be used in a string. – Andreas Mar 25 '21 at 16:25

2 Answers2

2

Method 1 - Backslash escape

Escape the double quotes within your HTML string with the backslash \ character:

alertChange = document.getElementById("messageArea");
alertChange.innerHTML = "\"This <span class=\"keyWord\">code</span> needs to change!\"";
<div id="messageBox" class="messageBox">
     <div id="picture"></div>
     <div id="messageArea">"I need to update this <span class="keyWord">code</span> and keep the 
          quotations and keywords!"
     </div>
</div>

Further reading: String - JavaScript | MDN#Escape Notation

Method 2 - Using template strings

Declare your string as a template literal by encapsulating it in backtick characters:

alertChange = document.getElementById("messageArea");
alertChange.innerHTML = `"This <span class="keyWord">code</span> needs to change!"`;
<div id="messageBox" class="messageBox">
     <div id="picture"></div>
     <div id="messageArea">"I need to update this <span class="keyWord">code</span> and keep the 
          quotations and keywords!"
     </div>
</div>

Further reading: Template literals (Template strings) - JavaScript | MDN

Method 3 - Single quote (') encapsulation

In this specific case, since you haven't used single quotes anywhere in your string, you can simply declare the HTML string by encapsulating it in single quote characters. Be forewarned that this will break if for whatever reason your text changes to include a single quote, which would then force you to escape them as detailed in Method 1.

alertChange = document.getElementById("messageArea");
alertChange.innerHTML = '"This <span class="keyWord">code</span> needs to change!"';
<div id="messageBox" class="messageBox">
     <div id="picture"></div>
     <div id="messageArea">"I need to update this <span class="keyWord">code</span> and keep the 
          quotations and keywords!"
     </div>
</div>
esqew
  • 42,425
  • 27
  • 92
  • 132
0

You need to use the Backslash \ to "escape" the special character (in your case the double quote symbol) like this

alertChange.innerHTML = "\"This <span class=\"keyWord\">code</span> needs to change!\"";
Mario Perez
  • 2,777
  • 1
  • 12
  • 21