Reverse HTML tags, understand the purpose

Question

In the following HTML

<nav>
  <a href="home.html">home</a>
  <a href="about.html">about</a>
  <a href="more.html">more</a>
  <a href="contact.html">contact</a>
</nav>

should be discarded <a>.

Javascript

Create an inverse array:

var n = document.querySelector("nav");
var max = n.children.length;
var arrReverse = [];

for (i = (max - 1); i > -1; i -= 1) {
  arrReverse.push(n.children[i]);
}

I thought this would work:

for(j = 0; j < max; j += 1) {
  n.children[j].innerHTML = arrReverse[j].innerHTML;
  n.children[j].href = arrReverse[j].href;
}

but this is not so. Output signal contact more more contact.

Can someone explain why this is not working.

Jsfiddle

Answer 1

when changing, n.childerns arrReversechange too

var n = document.querySelector("nav");
var max = n.children.length;
var arrReverse = [];

for(i = (max - 1); i > -1; i -= 1) {
  arrReverse.push([n.children[i].innerHTML,n.children[i].href]);
}

for(j = 0; j < max; j += 1) {
  // console.log(arrReverse[j].innerHTML);
  n.children[j].innerHTML = arrReverse[j][0];
  n.children[j].href = arrReverse[j][1];
}

Answer 2

I think this is because you store links here (because children [i] are objects):

arrReverse.push(n.children[i]);

So your items arrReverseare links to n. children[i], not new objects. Here's why here:

n.children[j].innerHTML = arrReverse[j].innerHTML;
n.children[j].href = arrReverse[j].href;

, .

:

var n = document.querySelector("nav");
var max = n.children.length;
var arrReverse = [];

for(i = (max - 1); i > -1; i -= 1) {
  arrReverse.push(clone(n.children[i]));  //here we store new objects, not references
}

for(j = 0; j < max; j += 1) {
  // console.log(arrReverse[j].innerHTML);
  n.children[j].innerHTML = arrReverse[j].innerHTML;
  n.children[j].href = arrReverse[j].href;
}

function clone(obj)
{ 
   var clone = {};
   clone.prototype = obj.prototype;
   for (property in obj) clone[property] = obj[property];
   return clone;
}

JSFiddle

Answer 3

DOM , :

for (j = 0; j < max; j += 1) {
    n.children[j].innerHTML = arrReverse[j].innerHTML;
    n.children[j].href = arrReverse[j].href;
}

, .

var n = document.querySelector("nav");
var a = n.querySelectorAll("a"),
    max = a.length;
var arrReverse = [],
    menu = [],
    i, j, k = 0;

// save data
for (k = 0; k < max; k++) {
    menu[k] = {
        text: a[k].innerHTML,
        link: a[k].href
    }
}

// reverse data
for (i = (max - 1); i > -1; i -= 1) {
    arrReverse.push(menu[i]);
}

// print reversed data
for (j = 0; j < max; j += 1) {
    a[j].innerHTML = arrReverse[j].text;
    a[j].href = arrReverse[j].link;
}

Fiddle

menu = [] , ( ). .

, .

Answer 4

arrReverse , HTMLCollection, , HTMLCollection . , , ParentNode.children, HTMLCollection. , , DOM, HTMLCollection.

, , :

HTMLCollection, n.children:

0 => <a href="home.html">home</a>
1 => <a href="about.html">about</a>
2 => <a href="more.html">more</a>
3 => <a href="contact.html">contact</a>

arrReverse:

0 => <a href="contact.html">contact</a> (reference of the HTMLCollection index 3)
1 => <a href="more.html">more</a> (reference of the HTMLCollection index 2)
2 => <a href="about.html">about</a> (reference of the HTMLCollection index 1)
3 => <a href="home.html">home</a> (reference of the HTMLCollection index 0)

:

n.children[0].innerHTML = arrReverse[0].innerHTML;
n.children[0].href = arrReverse[0].href;

n.children[1].innerHTML = arrReverse[1].innerHTML;
n.children[1].href = arrReverse[1].href;

:

HTMLCollection:

0 => <a href="contact.html">contact</a>
1 => <a href="more.html">more</a>
2 => <a href="more.html">more</a>
3 => <a href="contact.html">contact</a>

arrReverse:

0 => <a href="contact.html">contact</a> (reference of the HTMLCollection index 3)
1 => <a href="more.html">more</a> (reference of the HTMLCollection index 2)
2 => <a href="more.html">more</a> (reference of the HTMLCollection index 1)
3 => <a href="contact.html">contact</a> (reference of the HTMLCollection index 0)

, , about home. contact more more contact.

, :

1. , , Element.querySelectorAll , ( ) NodeList. , , DOM , NodeList , , , , , .
2. DOM ( NodeList), Element.outerHTML, DOM ( , ).

, , , externalHTML , - .

:

var anchors = document.querySelectorAll("nav a");

anchors.forEach((a, i) => a.outerHTML = anchors[anchors.length - i - 1].outerHTML);

<nav>
  <a href="home.html">home</a>
  <a href="about.html">about</a>
  <a href="more.html">more</a>
  <a href="contact.html">contact</a>
</nav>

Hide result