How to wrap the specific text with span tag inside the <p> tag

Question

 var dtag = document.querySelector('p') let len = dtag.innerHTML.split(' ').length for(let i = 0; i < len; i++){ if(dtag.innerHTML.split(' ')[i] === 'Format'){ let span = document.createElement('span') span.append(dtag.innerHTML.split(' ')[i]) dtag.append(span) } }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <script src="commanwords1.js" defer></script> </head> <body> <p>Printable Format hello shivam</p> </body> </html>

I have added the HTML and In the script tag the javascript code. Please let me know what should I have do to add the span tag in the specific word.

Answer 1

You are not working off the text nodes when you are trying to append the element. Since you are working with innerHTML you can build the string and replace the innerHTML.

 const dtag = document.querySelector('p') const words = dtag.innerHTML.split(' '); const mapped = words.map(word => word === 'Format'? `<span>${word}</span>`: word); dtag.innerHTML = mapped.join(' ');

 p span { color: green }

 <p>Printable Format hello shivam</p>

How to wrap the specific text with span tag inside the <p> tag

Question

1 answers

solution1
1 ACCPTED 2022-10-04 01:41:48

How to wrap the specific text with span tag inside the <p> tag

Question

1 answers

solution1 1 ACCPTED 2022-10-04 01:41:48

solution1
1 ACCPTED 2022-10-04 01:41:48