CODEWITHSUNDEEP
javascripthtml-parsing
Simon Staton
Simon Staton

Reputation: 4505

Best approach for parsing html string Programatically without appending to DOM

I am currently building a parser and compiler to handle my own custom 2-way data bindings, everything is working fine however it involves me appending my template string via .innerHTML which is not very efficient.

When parsing I need to access certain DOM methods such as .getElementsByTagName('*') and perform other traversal tasks so I am unable to use DOC fragments and due to the string being text/html am unable to use DOMParser() which uses text/xml

Does anyone know of a simple solution that would let me parse my string and store elements in storage where I can then manipulate and bind events before before appending to the DOM?

Here is a stripped down version of the current html string insertion which I am trying to avoid:

(function(){

    'use strict';

    var globalModel = function(data){
        this.templateString = data.template || '';
        this.template = data.node || document.body;
        this.initialise();
    };

    globalModel.prototype = {
        initialise: function(){
            this.template .innerHTML = this.templateString;
            this.compile();
        },
        compile: function(){
            var nodes = this.template.getElementsByTagName('*');
            //calling other methods with nodes, parsing and doing more traversal
        }
    }

    var myModule = new globalModel({
        template: '<div>Your email is {{email}} <input type="text" data-relation="email" /> {{test}} </div>'
    });

})();

Upvotes: 1

Views: 391

Answers (1)

kruczy
kruczy

Reputation: 791

try doing this:

var temp = document.createElement('div')
temp.innerHTML = this.templateString;

then you can move all the children to this.containerNode after doing the binding.

Upvotes: 2

Related Questions