Replace Element With Outerhtml And Immediately Access The Newly Created Element

I am replacing a DOM element by replacing its content with outerHTML. The trick works, but I need to immediately access the DOM element that was newly created. Unfortunately the cr

Solution 1:

Finally I settled for inserting the new element before, using insertAdjacentHTML, getting the new element by calling previousSibling, and then removing the unnecessary element with parentElement.removeChild

var code, e;

(function () {
  /**
   * Things done inside this IIFE is not under my control
   */
  code =
    '<div style="border: 1px solid black;">' +
    '  <span>I </span>' +
    '  <span>want </span>' +
    '  <span>to </span>' +
    '  <span>access </span>' +
    '  <span>all </span>' +
    '  <span>these </span>' +
    '  <span>spans.</span>' +
    '</div>';
  e = document.getElementById('replace_this');
}());

// insert the new element just before <x>
e.insertAdjacentHTML('beforeBegin', code);
// now <x>'s previousSibling should be the newly added elementvar new_elem = e.previousSibling;
// get rid of <x>
e.parentElement.removeChild(e);

// by this point, element e is replaced with newly added HTML. Let's do// an alert to make surealert('Check the document. New HTML is rendered.');

var spans = new_elem.getElementsByTagName('span'); 
alert(spans.length); // alerts 7alert(new_elem.outerHTML); // alerts contents of new element

<divid="container"style="padding: 20px; border: 1px dashed grey;"><div>Don't replace this.</div><xid="replace_this"></x><div>Don't replace this either.</div></div>

Solution 2:

Why not give the generated div an id? You could then getElementById on the new element.

eg.

var code =
    '<div id="newElement" style="border: 1px solid black;">' +
    '  <span>I </span>' +
    '  <span>want </span>' +
    '  <span>to </span>' +
    '  <span>access </span>' +
    '  <span>all </span>' +
    '  <span>these </span>' +
    '  <span>spans.</span>' +
    '</div>';

var e = document.createElement('x');
document.getElementById('container').appendChild(e);
e.outerHTML = code;

// by this point, element e is replaced with newly added HTML. Let's do// an alert to make surealert('Check the document. New HTML is rendered.');

e = getElementById('newElement'); // reassign e to the new divvar spans = e.getElementsByTagName('span'); 
alert(spans.length);
alert(e.outerHTML);

Solution 3:

I managed to get it fine using the following javascript:

var code =
    '<div style="border: 1px solid black;">' +
    '  <span>I </span>' +
    '  <span>want </span>' +
    '  <span>to </span>' +
    '  <span>access </span>' +
    '  <span>all </span>' +
    '  <span>these </span>' +
    '  <span>spans.</span>' +
    '</div>';

var e = document.createElement('x');

document.getElementById('container').appendChild(e);

e.outerHTML = code;

var spans = e.getElementsByTagName('span'); // oops! empty collection

These are my changes:

/**
 * Return direct children elements.
 *
 * @param {HTMLElement}
 * @return {Array}
 */functionelementChildren(element) {
    var childNodes = element.childNodes,
        children = [],
        i = childNodes.length;

    while (i--) {
        if (childNodes[i].nodeType == 1) {
            children.unshift(childNodes[i]);
        }
    }

    return children;
}
var target = document.getElementById('container');
alert(elementChildren(target)[0].children.length);

for (var i = 0; i < elementChildren(target)[0].children.length; i++) {
    elementChildren(target)[0].children[i].style.border = '1px red solid';
    alert(elementChildren(target)[0].children[i].innerHTML);
}

<div id="container" style="padding: 20px; border: 1px dashed grey;"></div>

Here is a Codepen with the code so you can edit play around with it: http://codepen.io/nicholasabrams/pen/VLGMgj