How does appendChild work in the context of an assignment?

Question

There are a couple of Questions out there related to this same piece of code, including this one: Understanding JavaScript Styling Again, this is taken from the book Secrets of the JavaScript Ninja

<!DOCTYPE html>
<html>
  <head>
    <title>Ninja Template</title>
    <style>
      body { background: #d6d6d6; }
      #results li.pass { color: green; }
      #results li.fail { color: red; }
    </style>
  </head>

<body>
  <h2>Test Groups</h2>

  <script>
    (function() {
      var results;

      this.assert = function assert(value, desc) {
        var li = document.createElement("li");
        li.className = value ? "pass" : "fail";
        li.appendChild(document.createTextNode(desc));
        results.appendChild(li);

        if(!value) {
          li.parentNode.parentNode.className = "fail";
        }

        return li;
      }

      this.test = function test(name, fn) {
        results = document.getElementById("results");
        results = assert(true, name).appendChild(   //THIS LINE
          document.createElement("ul"));
        fn();
      }

    })();

    window.onload = function() {
      test("Test Group #1", function() {
        assert(true, "First assertion completed");
        assert(true, "Second assertion completed");
      });

      test("Test Group #2", function() {
        assert(true, "Third assertion completed");
        assert(false, "Fourth assertion completed");
      });
    }

  </script>

  <ul id="results"></ul>
</body>

</html>

My question this time is about the line marked with the THIS LINE comment , I don't understand how it works. According to my understanding the assert() method always returns a li tag, and the mentioned line of JS code makes an assignment of that li to the parent ul#results element, Wouldn't that convert that ul#results into a li tag and break the desired structure? (Obviously it doesn't, and I'm puzzled as to why is that)

Does an assignment work as an append in pure JS?

I don't understand how this works at all, any help is sincerely appreciated.

Answer 1

.appendChild returns the child , in this case a ul , so it is setting results to be the newly inserted ul .

<ul id="results">
   <li>
       <ul></ul> <!-- this is now results -->
   </li>
</ul>

Each test() call appends an li to #results ; inside each test are two assert calls which now append their generated li elements into the newly inserted ul seen above.

this.test = function test(name, fn) {
    // new test; set _results_ to the outermost UL, ul#results
    results = document.getElementById("results");

    // next line appends an LI to #results, 
    // appends a new UL to that LI, and sets _results_ to the new UL
    results = assert(true, name).appendChild(document.createElement("ul"));

    // the assert() calls in the callback are now called 
    // with _results_ referring to the nested UL
    fn();
  }

DEMO

How does appendChild work in the context of an assignment?

Question

1 answers

solution1
2 ACCPTED 2013-12-06 17:14:21

How does appendChild work in the context of an assignment?

Question

1 answers

solution1 2 ACCPTED 2013-12-06 17:14:21

solution1
2 ACCPTED 2013-12-06 17:14:21