Use document.getElementById().innerHTML for this. Following is the JavaScript code −
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div class='getValueFromDiv' id='getValue' contenteditable="true" onkeyUp='display()'
style="color: red"></div>
<script>
function display(){
var storedValue = document.getElementById('getValue').innerHTML.value="This is the
value";
console.log("The value is==="+storedValue);
}
</script>
</body>
</html>To run the above program, save the file name anyName.html(index.html) and right click on the file and select the option open with live server in VS Code editor.
Following is the output. When you will click the mouse and place the arrow key, you will get the following output.
The snapshot is as follows −
