OuterHTML return of elements

Question

I am developing a library based on my needs. Let’s say in the example below:

lib('#menu a').html()

Returns peacefully the outerHTML, as shown below:

<a href="#home">Home</a>

Case the selector ('#menu a') have more than one tag "to", how to make to return all the outerHTML:

<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>

Answer 1

you can do the following:

var menus = document.querySelectorAll("#menu a");
var outerHTML = [].map.call(menus, function(menu) {
    return menu.outerHTML;
}).join("\n");

var textarea = document.getElementById("outerHTML");
textarea.value = outerHTML;

#outerHTML{
  width: 260px;
  height: 51px;
}

<div id="menu">
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#contact">Contact</a>
</div>
<textarea id="outerHTML"></textarea>

Answer 2

This answer is only complementary, the example from @Tobymosque is very good, but the use of element.outerHTML is not cross-Platform (believe that most engines today support, but there may still be cases that do not support), to solve this we can make an alternative method, would clone the element that wants to get the outerHTML and add it to an element created by document.createElement, example:

var texto = document.getElementById("texto");

document.getElementById("run").onclick = function() {
    var elemento = document.getElementById("test");
    var elementoVazio = document.createElement("div");

    elementoVazio.appendChild(elemento.cloneNode(true));
    texto.value = elementoVazio.innerHTML;
}

<div id="test"><strong>Olá mundo!</strong></div>
<p>
  <a id="run" href="#">Pegar outerHTML</a>
</p>
<textarea cols="50" rows="10" id="texto"></textarea>

We can add this method as an alternative and if the browser supports the outerHTML will not use it, because there is no need, to solve we can use the following code:

var divTmp = document.createElement("div");
if ("outerHTML" in divTmp) {
  //Código com outerHTML nativo
  ...
} else {
   //Código com cloneNode()
  ...
}

The code would look something like:

var texto = document.getElementById("texto");
var divTmp = document.createElement("div");

document.getElementById("run").onclick = function() {
    var elementoVazio, elemento = document.getElementById("test");

    if ("outerHTML" in divTmp) {
        texto.value = elemento.outerHTML;
    } else {
        elementoVazio = document.createElement("div");
        elementoVazio.appendChild(elemento.cloneNode(true));
        texto.value = elementoVazio.innerHTML;
    }
}

<div id="test"><strong>Olá mundo!</strong></div>
<p>
  <a id="run" href="#">Pegar outerHTML</a>
</p>
<textarea cols="50" rows="10" id="texto"></textarea>

Tobymosque’s code would look something like:

if ("outerHTML" in divTmp) {
  function getOuterHTML(menu) {
    return menu.outerHTML;
  }
} else {
  function getOuterHTML(menu) {
    var data, el = document.createElement("div");

    el.appendChild(menu.cloneNode(true));
    data = el.innerHTML;
    el = null;

    return data;
  }
}

var menus = document.querySelectorAll("#menu a");
var outerHTML = [].map.call(menus, getOuterHTML).join("\n");