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


I access an element of my page and I save it in a variable:

var nodo = document.getElementsByClassName('prueba');

if I do a

var nodo = String(nodo);

It does not work for me, I know it's an array of objects but if I pass it to a string I only get a text that is [object HTMLCollection] and there's no way. The point is that I try to save all the HTML of that node in a variable of type String but there is no way.

Does anyone think of how I can do it?


Thanks to all of you who have given me your time to help me, I hope I can return the favor, the easy way has been:

var nodo = document.getElementsByClassName('ep-gadget epgadget-externalvideo')[0].outerHTML

It occurred to me that this function would exist when the element inspector sees the option copy outerHTML

asked by bruno celaya 24.02.2017 в 13:10

5 answers


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(array_de_strings.join(', '));
<li class="minodo">primero</li>
<li class="minodo">segundo</li>
<li class="minodo">tercero</li>
<li class="minodo">cuarto</li>

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.

answered by 24.02.2017 в 13:19

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


 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

answered by 24.02.2017 в 13:13

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(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.

answered by 25.02.2017 в 16:40

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

var prueba = {a: 1, b: 2};

// [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};

// {"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");

[], function (el) {


<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>
answered by 26.02.2017 в 00:02

It's easy You just have to do this

var nodo = document.getElementsByClassName('prueba');
answered by 30.10.2017 в 16:13