How to Change Div Content With JavaScript

How can I change div content with JavaScript?

Assuming you're not using jQuery or some other library that makes this sort of thing easier for you, you can just use the element's innerHTML property.

document.getElementById("content").innerHTML = "whatever";

Change div content completely programmatically

Hidden divs will not take space of the page!

Addressing your points:

This will not work, just think logically: you hide the parent div (first div in your description), then its children will also be hidden!
This would be the way to do it! Just keep your 2 divs at the same level and hide/show them alternatly.
You can also just use 1 div and just replace its content for each use (being a better option highly depends on your context)

To make something like that in javascript, you could go along the lines:

function switchdivs() {  if (document.getElementById('one').style.display == 'block') {    document.getElementById('one').style.display = 'none';    document.getElementById('two').style.display = 'block';  } else {    document.getElementById('one').style.display = 'block';    document.getElementById('two').style.display = 'none';  }}
function replacediv() {  if (document.getElementById('replacer').innerHTML == "Original content")    document.getElementById('replacer').innerHTML = 'Replaced content';  else    document.getElementById('replacer').innerHTML = "Original content";}

#two {  display: none;}

<div id='one'>  one</div><div id='two'>  two</div><button onclick="switchdivs()">Toggle the divs!</button><button onclick="replacediv()">Replace the div bellow!</button><div id='replacer'>  Original content</div>

setting content between div tags using javascript

Try the following:

document.getElementById("successAndErrorMessages").innerHTML="someContent";

msdn link for detail : innerHTML Property

Changing div content with Javascript onClick

The problem is that the submit button is posting the form, so you are not seeing the change - If you change your submit button to a normal button it will work

<input type="button"name="button" id="button" onclick="myfunction()" />

How to change div contents with javascript

If you want those divs to stop taking space, you have to use display:none instead of visibility:hidden, change your function to

function chooseDiv() {
    if (document.getElementById("selectionDiv1").checked) {
        document.getElementById("div2").style.display = "none";
        document.getElementById("div1").style.display = "block";
    } else {
        document.getElementById("div2").style.display = "block";
        document.getElementById("div1").style.display = "none";
    }
}

Working plnkr: http://plnkr.co/edit/H4C9C7dAD324qJUgESMF?p=preview

Change div content on mouse hover with default content fallback

You need to store the original text and bring it back when the mouse leaves.

var element = getElementById('content'),
  storedText;

function hover(description) {
    console.log(description);
  storedText = element.innerHTML;
  element.innerHTML = description;
}

function leave() {
    element.innerHTML = storedText;
}

<div id="content">
    Stuff should be placed here.
</div>

<br/>
<br/>
<br/>
<ul>
    <li onmouseover="hover('Apples are delicious')" onmouseleave="leave()">Apple</li>
    <li onmouseover="hover('oranges are healthy')" onmouseleave="leave()">Orange</li>
    <li onmouseover="hover('Candy is the best')" onmouseleave="leave()">Candy</li>
</ul>

Changing content of div element on main page, from another page using JS

(main.html)

<div id="content">
    Any Text Here
</div>

(main.js)

document.addEventListener('DOMContentLoaded', function(){
   const contentDiv = document.getElementById('content');
   const data = sessionStorage.getItem('data');
   if(data){
       contentDiv.innerHTML = data;
   }
});

(page2.html)

<button class="home" onclick="change()">Home</button>

(page2.js)

function change()
{
  sessionStorage.setItem('data', 'some value');
}

Changing Div content with innerHTML

You should use like this-

document.getElementById("player").innerHTML = ' <i class="fa fa-stop" aria-hidden="true"></i>';

Just replace the double quotes with single quotes.