Remove word from div element

Question

I am creating an operating system environment which of coerce has desktop icons. These icons are are identified with the id of a number and icon label by its number and the value text.

When I right click on any icon my context menu appears, this picks up the id of the icon clicked on and adds the name of the icon and the word icon to the top of the menu so you can identify which icon is clicked.

When I click a link within the menu like open, I need to re use the menu header text minus the word icon so I can relocate this icon by its label to perform the task.

Here's what I have for locating the icon.

function LocateIcon(Icon) 
{
if (Icon <= document.getElementById('IconsTotal').innerHTML)
{
if (document.getElementById('WI'+Icon+'Text').innerHTML == document.getElementById('ContextMenuStatus').innerText)
{
return Icon;
} else {
LocateIcon(+Icon +1);
}
} else {
AlertBox('No match found.');
}
}

You can see an example here: http://www.stepnageos.com

I have this working by updating the the code when you mouse over an icon. My problem is that when the menu is active, placing the mouse over another icon changes the value so the options will not relate to the original icon.

This is why i need to use the value from the open menu.

Answer 1

You can import jQuery in your HTML and use $("div").replaceWith("about") , which replaces the words with about.

 $("div").replaceWith("about")

 <div>about icon</div> <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

Answer 2

You can edit an element's innerHTML by referencing the element and directly setting the property to the new text, like this:

let div = document.getElementById('container');

div.innerHTML = 'About';

Here's a quick repl.it !