CODEWITHSUNDEEP
javascriptxmlhttprequestsalesforcevisualforce
Marty C.
Marty C.

Reputation: 696

head children missing in responseXML when trying to append to document

I have a rather simple requirement that I'm trying to implement:

  1. Construct a XMLHttpRequest to load another page
  2. Iterate through whatever is found in the head element in the other page
  3. For each element found, append it to the head element in the current (calling) page

What I'm finding to be very odd and confusing is that some expected elements in the other page's head are missing. But as soon as I remove the single line of code that appends each found element to the calling page, all child elements in the other page's head magically appear.

For example, let's say the other page should have 2 meta elements, 3 link elements and 4 script elements. For some reason my XMLHttpRequest object's responseXML comes back having only 1 meta element, 1 link element and 3 script elements.

Below is the line of code that I really want to execute. But when I have it in the HTML source, some head children in responseXML go missing. You can see it in action on this bin or this Visualforce page.

head.appendChild(header.head.children[i]);

Below shows the same code commented out. When I do this, the missing children reappear. You can see it in action on this bin or this Visualforce page.

//head.appendChild(header.head.children[i]);

What is causing the child elements to disappear? If you open the JavaScript console (Chrome) or Web Console (Firefox), you can very clearly see the difference from loading the two pages above.

Upvotes: 0

Views: 115

Answers (1)

Todd
Todd

Reputation: 5454

I'm still curious of the answer to the real question of why this happens. I've got a few thoughts, but this first: change your merge code to the following snippet.

  Communities.mergeHeader = function(header) {
    console.log("header: %o", header);

    var head = document.getElementsByTagName("head")[0];
    head.innerHTML = header.head.outerHTML;
  };

I will follow up with the thoughts on why.

follow-up

DEMO

ok. got totally side-tracked. the reason that you're seeing those nodes "disappear" is because you are literally displacing them:

js here we do our moving code

var list = document.getElementById('list'),
    btn = document.getElementById('btn');

document.head.appendChild(list);

html before

<ul id='list'>
  <li>Have</li>
  <li>you</li>
  <li>ever</li>
  <li>needed</li>
  <li>to</li>
  <li>keep</li>
  <li>a</li>
  <li>list</li>
  <li>in</li>
  <li>your</li>
  <li>head?</li>
</ul>

<p>Now you can:
  <button id='btn'>List -> Head</button>
</p>

html2 after

head element

after move you can see that the body is missing the list.

<head>
    <meta charset="UTF-8">
    <meta name="robots" content="noindex">
    <link rel="canonical" href="http://codepen.io/presstep/pen/a385456d87e7f2c084dc338c1d885c09/?editors=101">
    <style class="cp-pen-styles">
        body {
          font: 300 25px/1 sans-serif;
        }
        ul {
          list-style-type: square;
        }
        p {
          font-size: 14px;
        }
    </style>
    <ul id="list">
        <li>Have</li>
        <li>you</li>
        <li>ever</li>
        <li>needed</li>
        <li>to</li>
        <li>keep</li>
        <li>a</li>
        <li>list</li>
        <li>in</li>
        <li>your</li>
        <li>head?</li>
    </ul>
</head>
<body>
  <p>Now you can:
    <button id='btn'>List -> Head</button>
  </p>
</body>

Upvotes: 1

Related Questions