How to convert an HTML element to a string in javascript?

You can iterate over the answer of your getElementByClassName doing:

var list= document.getElementsByClassName("minodo"),
    array_de_strings = [];

for (var i = 0; i < list.length; i++) {
    console.log(list[i].textContent);
    array_de_strings.push(list[i].textContent);
}
console.log(array_de_strings.join(', '));

<ul>
<li class="minodo">primero</li>
<li class="minodo">segundo</li>
<li class="minodo">tercero</li>
<li class="minodo">cuarto</li>
</ul>

Be careful, the output of a getElementByClassName is a nodeList, which is iterable and yet is not an array so you can not simply make a map or reduce it to concatenate it. That's why I applied the crude technique of adding the elements to an empty array. The latter is just one more way to operate with the output of a nodeList.

getElementsByClassName returns a collection of all elements with that class. Try to access the item you want and pick up the text.

ex:

 var nodo = document.getElementsByClassName('prueba');
    console.log(nodo[0].textContent);  //accedo al primer elemento

<p class="prueba">Hola!</p>

You can also check out nodeValue , outterHTML or innerHTML ... depending on what you need

Hello, such good afternoon. I know that the doubt is resolved, but if you are more comfortable or want to know the alternative via Jquery, it would be the next one to take the first node of the DOM (following the example above).

var auxVar = $('li').first().html(); //Toma el html del primer <li> de todos.
 console.log(auxVar);
 console.log(typeof auxVar); // Comprueba el tipo de variable. String

In this way we do the same. I try to use Javascript more than Jquery but many things to understand how they work, it may come well to experiment with Jquery (if you had access naturally) and then replicate the example in Javascript to understand it.

It's the same thing that happens if you do the following:

var prueba = {a: 1, b: 2};
console.log(String(prueba));

// [object Object]

If you wanted a representation of that object in the form of String you should use JSON.stringify :

var prueba = {a: 1, b: 2};
console.log(JSON.stringify(prueba));

// {"a":1,"b":2}

The same goes for other types of objects. When using the getElementsByClassName method returns an HTMLCollection object (it contains all the elements in your document that have that class), so if you try to convert it to String you will get [object HTMLCollection] . To return a String representation of an HTML element, you should use the innerHTML methods (for a% representation% of the content of the element) or String for a outerHTML representation of the element itself. You should only bear in mind that these methods should be used in an object of String , so if you want to do it in an object of type Element you must iterate in it:

var elementos = document.getElementsByClassName("prueba");

[].forEach.call(elementos, function (el) {

    console.log(el.outerHTML);

});

<div class="prueba">uno</div>
<div class="prueba">dos</div>
<div class="prueba">tres</div>

Although if your code should be supported at least by HTMLCollection , to select a single element per class, instead of using Internet Explorer 8 you could use getElementsByClassName , which directly returns an object of type querySelector instead of an object type Element since it selects the first element that matches the selector:

var elemento = document.querySelector(".prueba");
console.log( elemento.outerHTML );

<div class="no-prueba">uno</div>
<div class="prueba">dos</div>
<div class="no-prueba">tres</div>

It's easy You just have to do this

var nodo = document.getElementsByClassName('prueba');
console.log(nodo[0].innerHTML)