JSFiddle - React, Tailwind, and code Playground

by rwaldron

HTML

<p>
Check out the console...
</p>
<custom:element>1</custom:element>
<custom:element>2</custom:element>
<custom:element>3</custom:element>

JavaScript

//get the list of custom elements
var elems = document.getElementsByTagName('custom:element'), 
    copy = [];


for ( var i = 0; i < elems.length; i++ ) {
 copy.push( elems[i] );  
} 
console.log("start with", copy)
//iterate over them
$.each(copy,function( idx, elem ) {

    /*
    replace each element with a div instead
    the error that is occurring is that after the first element is replaced,
    the following elements' targets are lost, and each is passed as a 'DOMWindow'
    object instead of the correct 'HTMLElement' object
    */
    
    console.log('about to kill element: ', this);
    //console.log($(this));
    
    $(this).replaceWith('<div class="customElement">'+idx+'</div>');
    
    //console.log('killed element', elems);
});