¿Cómo obtener el texto puro sin elemento HTML usando JavaScript?

Tengo el botón 1 y algo de texto en mi HTML como el siguiente:

function get_content(){
   // I don't know how to do in here!!!
}

<input type="button" onclick="get_content()" value="Get Content"/>
<p id='txt'>
<span class="A">I am</span>
<span class="B">working in </span>
<span class="C">ABC company.</span>
</p>

Cuando el usuario hace clic en el botón, el contenido <p id='txt'>se convertirá en el siguiente resultado esperado:

<p id='txt'>
// All the HTML element within the <p> will be disappear
I am working in ABC company.
</p>

¿Alguien puede ayudarme a escribir la función de JavaScript?

Gracias.

[2017-07-25] ya que esta sigue siendo la respuesta aceptada, a pesar de ser una solución muy hacky, estoy incorporando el código de Gabi , dejando el mío como un mal ejemplo.

<style>
.A {background: blue;}
.B {font-style: italic;}
.C {font-weight: bold;}
</style>

<script>
// my hacky approach:
function get_content() {
     var html = document.getElementById("txt").innerHTML;
     document.getElementById("txt").innerHTML = html.replace(/<[^>]*>/g, "");
}
// Gabi's elegant approach, but eliminating one unnecessary line of code:
function gabi_content() {
    var element = document.getElementById('txt');
    element.innerHTML = element.innerText || element.textContent;
}
// and exploiting the fact that IDs pollute the window namespace:
function txt_content() {
    txt.innerHTML = txt.innerText || txt.textContent;
}
</script>

<input type="button" onclick="get_content()" value="Get Content (bad)"/>
<input type="button" onclick="gabi_content()" value="Get Content (good)"/>
<input type="button" onclick="txt_content()" value="Get Content (shortest)"/>
<p id='txt'>
<span class="A">I am</span>
<span class="B">working in </span>
<span class="C">ABC company.</span>
</p>

Puedes usar esto:

var element = document.getElementById('txt');
var text = element.innerText || element.textContent;
element.innerHTML = text;

Dependiendo de lo que necesite, puede usar cualquiera element.innerTexto element.textContent. Se diferencian de muchas maneras. innerTextintenta aproximar lo que sucedería si selecciona lo que ve (renderizado html) y lo copia al portapapeles, mientrastextContent simplemente elimina las etiquetas html y le da lo que queda.

innerText También tiene compatibilidad con los antiguos navegadores IE (vinieron de allí).

Si puedes usar jquery, entonces es simple

$("#txt").text()

Esta respuesta funcionará para obtener solo el texto de cualquier elemento HTML.

Este primer parámetro "nodo" es el elemento para obtener el texto. El segundo parámetro es opcional y, si es verdadero, agregará un espacio entre el texto dentro de los elementos si no hubiera espacio allí.

function getTextFromNode(node, addSpaces) {
    var i, result, text, child;
    result = '';
    for (i = 0; i < node.childNodes.length; i++) {
        child = node.childNodes[i];
        text = null;
        if (child.nodeType === 1) {
            text = getTextFromNode(child, addSpaces);
        } else if (child.nodeType === 3) {
            text = child.nodeValue;
        }
        if (text) {
            if (addSpaces && /\S$/.test(result) && /^\S/.test(text)) text = ' ' + text;
            result += text;
        }
    }
    return result;
}

Dependiendo de lo que necesite, puede usar cualquiera element.innerTexto element.textContent. Se diferencian de muchas maneras. innerTextintenta aproximar lo que sucedería si selecciona lo que ve (renderizado html) y lo copia al portapapeles, mientrastextContent simplemente elimina las etiquetas html y le da lo que queda.

innerText ya no se usa solo para IE , y es compatible con todos los principales navegadores . Por supuesto, a diferencia detextContent , tiene compatibilidad con los antiguos navegadores IE (ya que se les ocurrió).

Ejemplo completo (de la respuesta de Gabi ):

var element = document.getElementById('txt');
var text = element.innerText || element.textContent; // or element.textContent || element.innerText
element.innerHTML = text;

Esto funciona para mí compilado en base a lo que se dijo aquí con un estándar más moderno. Esto funciona mejor para múltiples búsquedas.

let element = document.querySelectorAll('.myClass')
  element.forEach(item => {
    console.log(item.innerHTML = item.innerText || item.textContent)
  })

Eso debería funcionar:

function get_content(){
   var p = document.getElementById("txt");
   var spans = p.getElementsByTagName("span");
   var text = '';
   for (var i = 0; i < spans.length; i++){
       text += spans[i].innerHTML;
   }

   p.innerHTML = text;
}

Pruebe este violín: http://jsfiddle.net/7gnyc/2/

function get_content(){
 var returnInnerHTML = document.getElementById('A').innerHTML + document.getElementById('B').innerHTML + document.getElementById('A').innerHTML;
 document.getElementById('txt').innerHTML = returnInnerHTML;
}

Deberias hacer eso.

Probar (versión corta de la idea de respuesta de Gabi )

function get_content() {
   txt.innerHTML = txt.textContent;
}

function get_content() {
   txt.innerHTML = txt.textContent ;
}

span { background: #fbb}

<input type="button" onclick="get_content()" value="Get Content"/>
<p id='txt'>
<span class="A">I am</span>
<span class="B">working in </span>
<span class="C">ABC company.</span>
</p>