Attachment 369817 Details for Bug 197868 – Demo of the bug

Demo of the bug

getElementsByClassName-outerHTML-descending-vs-ascending.html (text/html), 1.76 KB, created by alvin_signups on 2019-05-13 20:22:49 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: alvin_signups

Created: 2019-05-13 20:22:49 PDT

Size: 1.76 KB

patch

obsolete

><h1>Setting outerHTML for members of an array</h1>
>
><h2>Issue</h2>
>
><p>While (a) iterating on a group of elements from <code>document.getElementsByClassName</code> and (b) setting <code>outerHTML</code> for each element, latter elements become inaccessible in an ascending <code>for</code>-loop.</p>
>
><p>This is only triggered for <code>outerHTML</code>, not for <code>innerHTML</code>.</p>
>
><h2>Current workaround</h2>
>
><p>Iterate in descending order or use <code>innerHTML</code> instead.</p>
>
><hr>
>
><h1>Experiment</h1>
>
><ul>
>  <li>2 groups of divs, member divs have one of 2 class names: <code>while-descending</code> or <code>for-ascending</code></li>
>  <li>See code for implementation detail</li>
></ul>
>
><h2>Iterating from end of array</h2>
>
><div class="while-descending">1</div>
>
><div class="while-descending">2</div>
>
><div class="while-descending">3</div>
>
><div class="while-descending">4</div>
>
>
><h2>Iterating from start of array</h2>
>
><div class="for-ascending">A</div>
>
><div class="for-ascending">B</div>
>
><div class="for-ascending">C</div>
>
><div class="for-ascending">D</div>
>
>
><script>
>(function() {
>  var CONTENT_SUBSTITUTION = "substituted";
>
>  var descendingGroup = document.getElementsByClassName( "while-descending" ) || null;
>  var ascendingGroup = document.getElementsByClassName( "for-ascending" ) || null;
>
>  if ( descendingGroup ) {
>    var numMembers = descendingGroup.length;
>    var counter = numMembers - 1;
>
>    while ( counter >=0 ) {
>      var member = descendingGroup[counter];
>      member.outerHTML = CONTENT_SUBSTITUTION;
>      counter--;
>    }
>  }
>
>  if ( ascendingGroup ) {
>    var numMembers = ascendingGroup.length;
>
>    for ( var i=0; i<numMembers; i++ ) {
>      var member = ascendingGroup[i];
>      member.outerHTML = CONTENT_SUBSTITUTION;
>    }
>  }
>
>})();
></script>

<h1>Setting outerHTML for members of an array</h1>

<h2>Issue</h2>

<p>While (a) iterating on a group of elements from <code>document.getElementsByClassName</code> and (b) setting <code>outerHTML</code> for each element, latter elements become inaccessible in an ascending <code>for</code>-loop.</p>

<p>This is only triggered for <code>outerHTML</code>, not for <code>innerHTML</code>.</p>

<h2>Current workaround</h2>

<p>Iterate in descending order or use <code>innerHTML</code> instead.</p>

<hr>

<h1>Experiment</h1>

<ul>
  <li>2 groups of divs, member divs have one of 2 class names: <code>while-descending</code> or <code>for-ascending</code></li>
  <li>See code for implementation detail</li>
</ul>

<h2>Iterating from end of array</h2>

<div class="while-descending">1</div>

<div class="while-descending">2</div>

<div class="while-descending">3</div>

<div class="while-descending">4</div>


<h2>Iterating from start of array</h2>

<div class="for-ascending">A</div>

<div class="for-ascending">B</div>

<div class="for-ascending">C</div>

<div class="for-ascending">D</div>


<script>
(function() {
  var CONTENT_SUBSTITUTION = "substituted";

  var descendingGroup = document.getElementsByClassName( "while-descending" ) || null;
  var ascendingGroup = document.getElementsByClassName( "for-ascending" ) || null;

  if ( descendingGroup ) {
    var numMembers = descendingGroup.length;
    var counter = numMembers - 1;

    while ( counter >=0 ) {
      var member = descendingGroup[counter];
      member.outerHTML = CONTENT_SUBSTITUTION;
      counter--;
    }
  }

  if ( ascendingGroup ) {
    var numMembers = ascendingGroup.length;

    for ( var i=0; i<numMembers; i++ ) {
      var member = ascendingGroup[i];
      member.outerHTML = CONTENT_SUBSTITUTION;
    }
  }

})();
</script>

Actions: View

Attachments on bug 197868: 369817