some ch9 exercise code from today

ch9/browser.py

@@ -96,10 +96,27 @@ class JSContext:
         self.interp = dukpy.JSInterpreter()
         self.interp.export_function("random_string", print)
         self.interp.export_function("querySelectorAll", self.querySelectorAll)
+        self.interp.export_function("getChildren", self.getChildren)
+        self.interp.export_function("createElement", self.createElement)
+        self.interp.export_function("appendChild", self.appendChild)
 
         with open("runtime.js") as f:
             self.interp.evaljs(f.read())
 
+    def appendChild(self, parent_handle, child_handle):
+        parent_node = self.handle_to_node[parent_handle]
+        child_node = self.handle_to_node[child_handle]
+        parent_node.children.append(child_node)
+        self.tab.render()  # put this at the end of any function called from JS that edits the HTML node tree
+
+    def createElement(self, tag):
+        return self.get_handle(Element(tag, {}))
+
+    def getChildren(self, handle):
+        node = self.handle_to_node[handle]
+        return [self.get_handle(child) for child in node.children
+                if isinstance(child, Element)]
+
     def run(self, code_string):
         return self.interp.evaljs(code_string)
 

ch9/runtime.js

@@ -8,15 +8,38 @@ function Node(handle) {
   this.handle = handle;
 }
 
+function handlesToNodes(handles) {
+  return handles.map(function(h) {
+      return new Node(h);
+  });
+}
+
+Node.prototype.appendChild = function(child) {
+  // attach child to this
+  call_python("appendChild", this.handle, child.handle);
+
+  // optional:
+  return child;
+}
+
 Node.prototype.getAttribute = function(attr) {
   return call_python("getAttribute", this.handle, attr);
 }
 
+Object.defineProperty(Node.prototype, 'children', {
+    get: function() {
+      var handles =
+          call_python("getChildren", this.handle)
+      return handlesToNodes(handles);
+    }
+});
+
+
 document = {
   querySelectorAll: function(s) {
-    var handles = call_python("querySelectorAll", s);
-    return handles.map(function(h) {
-      return new Node(h);
-    });
-  }
+    return handlesToNodes(call_python("querySelectorAll", s));
+  },
+  createElement: function(tag) {
+    return new Node(call_python("createElement", tag));
+  },
 }

ch9/test2.js

@@ -5,6 +5,32 @@ for (var i = 0; i < divs.length; i++) {
   console.log("got a div");
   console.log(i);
   console.log(divs[i]);
-  console.log(divs[i].getAttribute("id"))
+//  console.log(divs[i].getAttribute("id"))
 }
 
+
+var body = document.querySelectorAll("body")[0]
+var a = body.children
+for (var i = 0; i < a.length; i++) {
+  console.log(a[i]);
+//  console.log(a[i].getAttribute("id"));
+}
+
+var a = document.querySelectorAll("p")
+console.log("got this many paragraphs")
+console.log(a.length)
+for (var i = 0; i < a.length; i++) {
+  console.log(a[i]);
+}
+
+
+var second_div = document.querySelectorAll("div")[1]
+var new_p = document.createElement("p")
+second_div.appendChild(new_p)
+
+var a = document.querySelectorAll("p")
+console.log("got this many paragraphs")
+console.log(a.length)
+for (var i = 0; i < a.length; i++) {
+  console.log(a[i]);
+}