How do I write this code without using .innerHTML? [duplicate]

Question

I am writing a JavaScript code where some characters of the string have a color and I want to display them through the HTML elements. I only want the 'abc' to be blue and no color change with 'def'.

For example, if there's a variable:

word = '<span style="color: blue">abc</span>def'

I used this to display the text in the HTML element:

presentCell.innerHTML = word;

Is there a way to not use .innerHTML and do the same thing? I'm worried about security problems because I am getting user input for 'abc' and 'def'.

I am making this word variable with this function:

function changeTextColorArr (textArr, colorArr){ resultArr = []; for(let i = 0; i < textArr.length; i++) { color = colorArr[i] === "" ? "black" : colorArr[i]; beginTag = `<span style="color: ${color}">` endTag= '</span>'; result = beginTag + textArr[i] + endTag; resultArr.push(result); } return resultArr; } //I get an array of an text and an array of colors correspoding to each text let word = changeTextColorArr(["abc"], ["blue"]) + "def"; console.log(word)

#UPDATE 2

function changeTextColorArr(textArr, colorArr) { resultArr = []; for (let i = 0; i < textArr.length; i++) { const span = document.createElement('span'); const color = colorArr[i] === "" ? "black" : colorArr[i]; span.style.color = color; span.textContent = textArr[i]; // Safely set the text content // push HTML code in a string format console.log( span.outerHTML); resultArr.push(span.outerHTML); } return resultArr; }

@mplungjan you're right. Thanks for the correction. I'll remove my comment — Daniel Robinson
– Daniel Robinson, Commented Aug 15, 2024 at 11:28

Thomas Sparber · Accepted Answer · 2024-08-08 08:55:34Z

0

You could do something like

presentCell.innerHTML = ''; presentCell.appendChild(document.createTextNode(word));

answered Aug 8, 2024 at 8:55

Thomas Sparber

2,9172 gold badges21 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user26695021 Over a year ago

Is "createTextNode(word)" more safer then innerhtml? What's the difference?

Thomas Sparber Over a year ago

Yes it is safe, read here stackoverflow.com/questions/11654555/….

Vaisakh T P · Accepted Answer · 2024-08-08 08:59:03Z

Avoid Using .innerHTML: Instead, create and append individual elements (e.g., ) directly to the DOM.

Use document.createTextNode: This ensures that text content is inserted safely without any unintended HTML rendering.

Use document.createElement: Create HTML elements like programmatically.

function changeTextColorArr(textArr, colorArr) { const fragment = document.createDocumentFragment(); // Create a document fragment to avoid multiple reflows for (let i = 0; i < textArr.length; i++) { const span = document.createElement('span'); const color = colorArr[i] === "" ? "black" : colorArr[i]; span.style.color = color; span.textContent = textArr[i]; // Safely set the text content fragment.appendChild(span); // Append the span to the document fragment } return fragment;}

Thank you for the code example! I made few edits to fit my program Would this code be more safe than before?
The code is on the original post at #update2. Would it be safe because it inserts the text into a variable by "textContent" and then get the html code by .outerhtml?

Collectives™ on Stack Overflow

How do I write this code without using .innerHTML? [duplicate]

2 Answers 2

2 Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Linked

Related