We Keep Coding

How to apply styles for appended element? [duplicate]

I have a little testcase over at:
http://jsfiddle.net/9xwUx/1/
The code boils down to the following (given a node with id "target"):
var string = '<div class="makeitpink">this should be pink, but is not</div>';
var parser = new DOMParser();
var domNode = parser.parseFromString(string,"text/xml");
document.getElementById("target").appendChild(domNode.firstChild);
If you run the testcase, and then inspect the target node via firebug/chrome web inspector and select any node within the body tag of jsfiddle's iframe, and do "edit as HTML", add a random charachter anywhere as a string [not an attribute to a domnode, to be clear], and "save", the style is applied. but not before that.
To say that i'm confused is an understatement.
Can anybody please clarify what is going on here?
Thanks.

You can change the mime type to text/html and do the following:
var parser = new DOMParser()
var doc = parser.parseFromString(markup, 'text/html')
return doc.body.firstChild
I didn't test on every browser but it works on Chrome and Firefox. I don't see any reason it wouldn't work elsewhere.

a bit late, but the reason is that you have parsed these using the text/xml option, which means that the results are XML nodes, which don't have CSS applied to them. When you right-click and go "edit as HTML" the browser reinterprets them as HTML and the change in the element will cause a redraw, reapplying the CSS.
I've been parsing my using the relatively hack-ish, yet definitely working method of creating a temporary element and manipulating the innerHTML property, making the browser do the parsing instead:
var temp = document.createElement("div")
//assuming you have some HTML partial called 'fragment'
temp.innerHTML = fragment
return temp.firstChild
Which you've noted in your jsfiddle. Basically it boils down to the output of the DOMParser being an instance of XMLDocument when you use the text/xml option.

How to use DOM features and jQuery in main.js?

I'm working on an add-on using Mozilla's Add-on SDK, and I've come across the need to HTML encode some text (swap out ampersands and special characters for their & equivalents). You can do this in JavaScript using the DOM by calling document.createElement() and adding text to it (provoking the browser to encode the text). Trouble is, in the privileged code (main.js) there is no DOM, so no way to access these features, or even use a library like jQuery. Is there a best practice here? How can I get access to features that would typically require a global document object from main.js?

If I understood correctly, you want to replace HTML entities (& and similar) by the actual characters. And your solution so far was:
var text = "foo&bar";
var element = document.createElement('foo');
element.innerHTML = text;
text = element.textContent;
Instead of using the DOM of your document (and risking running some script unintentionally) you can use DOMParser - it will parse text without any side-effects. Unfortunately, accessing DOMParser from main.js requires chrome authority but other than that the code is straightforward:
var text = "foo&bar";
var {Cc, Ci} = require("chrome");
var parser = Cc["#mozilla.org/xmlextras/domparser;1"]
.createInstance(Ci.nsIDOMParser);
text = parser.parseFromString(text, "text/html").documentElement.textContent;

does innerHTML work with XML Elements?

According to JavaScript: The Definitive Guide: "Despite its name, innerHTML can be used with XML elements as well as HTML elements".
However, when I actually attempt to access the innerHTML property of an XML Element object, undefined is returned:
var xml = $.ajax({url: "test.xml", async: false}).responseXML.documentElement;
console.log(xml.innerHTML); // displays "undefined" in console log
What is the explanation for this behavior?
test.xml:
<?xml version="1.0" encoding="utf-8"?>
<foo><bar>baz</bar></foo>

The earlier answers don't address the newer browsers that exist as of September 2014. When an XML document is created with:
var parser = new DOMParser();
var doc = parser.parseFromString(data, "text/xml");
where data is the XML document as a string, then the following are true:
In Firefox 28, and Chrome 36, the nodes in doc have an innerHTML field that contains the XML serialization of the contents of the node.
In IE 9, 10 and 11, Safari 7.0 and Opera 12, the nodes in doc have neither an innerHTML field nor an xml field. I was not able to identify something that could stand for these fields. There does not appear to be any other option than using XMLSerializer for these browsers.

The explanation is that the book is wrong on this point.
XML elements in IE have a non-standard xml property that provides the equivalent of innerHTML. For other browsers you'll need to use an XMLSerializer.

HTML5 defines there to be innerHTML on XML Elements (despite the name, using XML parser/serializer). Nothing implements this yet. Opera has for a while supported innerHTML in XHTML (though not XML generally), but uses the HTML parser/serializer for it.

You can do so, but I'd rather prefer to use jQuery because it is easier to implement. The jQuery way is selecting the element container that you want. Then you can use the html() property to change or get the innerHTML of your element.
$("myxmltag").html("<achildtag>Hello</achildtag><anotherchildtag>World!</anotherchildtag>");
For more information about this property, refer to: http://api.jquery.com/html/
Also, don't forget the differences between html() and text(), and you can use other properties to manipulate the elements within a node in your xml using jQuery, like append(), prepend(), after(), etc...

Fastest Way to Parse this XML in JS

Say I have this XML with about 1000+ bookinfo nodes.
<results>
<books>
<bookinfo>
<name>1</dbname>
</bookinfo>
<bookinfo>
<name>2</dbname>
</bookinfo>
<bookinfo>
<name>3</dbname>
</bookinfo>
</books>
</results>
I'm currently using this to get the name of each book:
var books = this.req.responseXML.getElementsByTagName("books")[0].getElementsByTagName("bookinfo")
Then use a for loop to do something with each book name:
var bookName = books[i].getElementsByTagName("name")[0].firstChild.nodeValue;
I'm finding this really slow when books is really big. Unfortunately, there's no way to limit the result set nor specify a different return type.
Is there a faster way?

You can try fast xml parser to convert XML data to JSON which is implemented in JS. Here is the benchmark against other parser.
var parser = require('fast-xml-parser');
var jsonObj = parser.parse(xmlData);
// when a tag has attributes
var options = {
attrPrefix : "#_" };
var jsonObj = parser.parse(xmlData,options);
If you don't want to use npm library, you can include parser.js in your HTML directly.
Disclaimer: I'm the author of this library.

Presumably you are using XMLHttpRequest, in which case the XML is parsed before you call any methods of responseXML (i.e. the XML has already been parsed and turned into a DOM). If you want a faster parser, you'll probably need a different user agent or a different javascript engine for your current UA.
If you want a faster way to access content in the XML document, consider XPath:
Mozilla documentation
MSDN documentation
I used an XPath expression (like //parentNode/node/text()) on a 134KB local file to extract the text node of 439 elements, put those into an array (because that's what my standard evalXPath() function does), then iterate over that array to put the nodeValue for each text node into another array, doing two replace calls with regular expressions to format the text, then alert() that to the screen with join('\n'). It took 3ms.
A 487KB file with 529 nodes took 4ms (IE 6 reported 15ms but its clock has very poor resolution). Of course my network latency will be nearly zero, but it shows that the XML parser, XPath evaluator and script in general can process that size file quickly.

if you want to parse the information from that xml much faster, try txml. it is very easy to use and for the type of xml you have shown, you can use its simplify method. it will give you very clean objects to work with.
https://www.npmjs.com/package/txml
Disclaimer: I'm the author of this library.

Parsing XML in JSFL?

It seems that there is no xml parsing tool in available JSFL (Adobe Flash-extension Javascript script file) : http://osflash.org/pipermail/flashextensibility_osflash.org/2006-July/000014.html
So, is there an easy and cross-platform way to add a javascript xml parser?

I know this is an old question, but I was looking for a solution to this problem as well (using Flash CS3). I needed to parse XML from a data file on disk. Combining the suggestion of George Profenza I was able to get it to work with using eval(). The key is to remove the first line (the xml declaration):
xmlData = eval( FLfile.read( xmlFile ).split( '\n' ).slice( 1 ).join( '\n' ) );
... and you're good to go!

Well, you can use XML and E4X straight from JSFL using Flash CS3 or newer as the Javascript engine got upgraded to 1.6
Here's a quick snippet that loops through elements in the current selection and traces xml:
var doc = fl.getDocumentDOM();//get the current document ref.
var selection = doc.selection;//get the selection
var layout = <layout />;//create the root node for our xml
var elementsNum = selection.length;//store this for counting*
for(var i = 0 ; i < elementsNum ; i++){
layout.appendChild(<element />);//add an element node
layout.element[i].#name = selection[i].name;//setup attributes
layout.element[i].#x = selection[i].x;
layout.element[i].#y = selection[i].y;
}
fl.trace(layout);

var xml = new XML(FLfile.read(file));
Then you can access all your nodes and attributes by writing this:
xml.nodeName
xml.nodeName.#attribute1
xml.nodeName.#attribute2
nodeName is the name of your node.
attribute1 should be the name of your attribute.
I hope this helps.

If JSFL uses ActionScript at some point, you can just do XML(xml_string) or XMLList(multiple_xml_nodes_string) as long as it's ActionScript 3.0 or higher. ActionScript 3.0 supports E4X witch is native XML in ECMAScript.

What works nicely for me is just creating a SwfWindow. Working in JSFL is nice and fast because you can change out the file without having to restart Flash, but often ActionScript gives you more power.
My current project does a couple tricks:
I will create objects in JSFL and then convert them to XML. I have to serialize them from Object format into a string which I pass to the SwfWindow (Panel). From the Panel, I take the String can convert it into XML. Then you can do anything you want in Actionscript 3.0.
If I just have XML manipulation, I will prompt the User for a XML files path in JSFL code, but hand the URL directly to the Panel, and have the Panel just load the XML directly.
Finally. For saving the XML, I will have to convert the XML to string via, 'xml.toXmlString()', but you also need to remove the '\n' so that you can hand the data to JSFL. I will strip out the '\n' for '|' or whatever you like. Then pass the string to JSFL, and you then can deserialize the string and change the '|' back to '\n' and save the file. Either using the older 'Save Output Panel' method, or using the newer File Write method.
Hope that helps.

function parseXML (xml) {
try { // normal browsers
return (new DOMParser()).parseFromString(xml, "application/xml");
}
catch (e) { // IE
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = "false";
xmlDoc.loadXML(xml);
return xmlDoc;
}
}
You might want to read more on DOMParser and the Microsoft.XMLDOM ActiveX object.