Send text instead of elements

Question

I recently made a chat on my website, it works pretty good but i just found out that i can send elements there, like divs, anchors etc, how can i make it plain text?

thats how the code looks like

let msgDiv = '<div id="receivedMsgDiv">\n' +
                '<div id="rMsgName" class="messageName">\n' +
                    ''+data.val().name+'' +
                '</div>\n' +
                '<div id="receivedMsg" class="bounce">\n' + 
                    ''+data.val().message+'' +
                '</div>\n' +
                '<div id="rMsgTime">\n' +
                    ''+data.val().time+'' +
                '</div>\n' +
            '</div>';
let msg = document.getElementById("msgDiv");
msg.innerHTML += msgDiv;

i want a message to be a plain text so i can send eg "Hey friend i found the solution its: <div id="id">something</div>

instead of "Hey friend i found the solution, its: an element any ideas how to fix that?

Due to how you are building the chunk of HTML you should *htmlentities* the values, see: https://stackoverflow.com/questions/18749591/encode-html-entities-in-javascript or rewrite your code with createElement and innerText etc — Lawrence Cherone, May 10 '22 at 20:40
If `data` is an object you should just use `data.name`, there's no need for `.val()` — Barmar, May 10 '22 at 20:41
You define `data.val().message` before the code we see. And that's the place we need to work on to help you. Since you use `.innerHTML` to display the div structure you DO want to be displayed. We can work around that, but would be easier if you show us the code where the values are being defined. — Kip, May 10 '22 at 21:07

Scott Marcus · Answer 1 · 2022-05-10T21:11:57.933

2

Instead of using innerHTML, which causes the HTML parser to parse the string, use textContent which doesn't.

In the example below, I just made an input element to use as data since you didn't share what data was. I also used template literals to inject the dynamic values into the string.

let data = document.querySelector("input");
let newDiv = 
`<div id="receivedMsgDiv">
   <div id="rMsgName" class="messageName">${data.value}</div>
   <div id="receivedMsg" class="bounce">${data.value}</div>
   <div id="rMsgTime">${data.value}</div>
 </div>`;
document.getElementById("msgDiv").textContent += newDiv;

<input name="user" value="John Doe">
<div id="msgDiv"></div>

edited May 10 '22 at 21:11

answered May 10 '22 at 21:06

Scott Marcus

64,069
6
49
71

Ah this would be a better answer. I removed mine. And seriously, template literals are amazing. – Jeff B May 10 '22 at 21:11
I think he wants to keep that div structure but remove it from the message input/value. – Kip May 10 '22 at 21:14
1

@Kip He can do whatever he wants. My answer simply shows what `textContent` does to solve his problem. – Scott Marcus May 10 '22 at 21:16
i want to keep the div structures, i want to make message value plain text, not the whole message div, you can see how it works on my website, kndxiu.xyz (try to send a div) – kndxiu May 11 '22 at 08:12
@kndxiu You can do whatever you need. Just use `textContent` for times when you want to show the HTML and `.innerHTML` for times when you want to parse the HTML. – Scott Marcus May 11 '22 at 12:20

Send text instead of elements

1 Answers1