Question

I have been working on adding XML element to XML structure without success, here is my code.

var parseXml;
        if (window.DOMParser) {
            parseXml = function(xmlStr) {
            return ( new window.DOMParser() ).parseFromString(xmlStr, "text/xml");
            };
        }
        else if (typeof window.ActiveXObject != "undefined" && new window.ActiveXObject("Microsoft.XMLDOM")) {
            parseXml = function(xmlStr) {
                var xmlDoc = new window.ActiveXObject("Microsoft.XMLDOM");
                xmlDoc.async = "false";
                xmlDoc.loadXML(xmlStr);
                return xmlDoc;
            };
        }
        else {
            parseXml = function() { return null; }
        }
        var xmlTree = parseXml("<root></root>");

        function add_children(child_name,parent_name)
        {
            str = '<'+child_name+'></'+child_name+'>';
            //strXML = parseXml(str);
            $(xmlTree).find(parent_name).append(str);
            var xmlString = (new XMLSerializer()).serializeToString(xmlTree);
            console.log(xmlString);
        }
        add_children("apple","root");
        add_children("orange","root");
        add_children("lychee","root");

but console is showing <root/> all three times

Answer 1

The problem is that you are creating the node in the Html document, not in the XML one, so you can’t append it. Change this line:

str = '<'+child_name+'></'+child_name+'>';

For this one:

str = xmlTree.createElement(child_name);

See the working code in http://jsfiddle.net/W9Wpb/