Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A replacement for innerHTML() to parse and write DOM elements.
JavaScript
Branch: master

Merge pull request #5 from sun/cleanup

Fixed coding style.
latest commit 4b173cbf30
@sun authored

README.md

innerXHTML

A JavaScript library to read and write DOM elements in XHTML, mostly utilizing native browser methods.

innerHTML produces invalid XHTML. Instead of a big string, innerXHTML reads and writes the DOM tree, node by node.

Usage

Functions

innerXHTML(Node|String node)

Reads a DOM tree of Node or the DOM node identified by the HTML ID string, and returns a text string of the contained XHTML markup.

innerXHTML(Node|String node, String htmlString [, mixed prependTo = false])

Writes a DOM tree from a passed in htmlString containing XHTML markup to Node or the DOM node identified by the HTML ID string.

The optional prependTo argument dictates where the markup is inserted:

  • false: (default) Replaces all children of Node.
  • DOMNode: A DOM node. htmlString is inserted before it.
  • ID: A HTML ID string suitable for document.getElementById(). htmlString is inserted before it.
  • true: Appends htmlString to Node.

.

translateXHTML(String htmlString)

Internal. Translates a string containing XHTML and XML markup into nodes for insertion into the DOM.

Reading and parsing DOM elements

With innerHTML you'd do:

var container = document.getElementById('container');
var code = container.innerHTML;

With innerXHTML:

var container = document.getElementById('container');
var code = innerXHTML(container);

This returns the content of #container as a XHTML markup string.

Writing and serializing DOM elements

With innerHTML you'd do:

var container = document.getElementById('container');
var markup = '<div id="content"><p class="text">Hello world!</p></div>';
var code = container.innerHTML(markup);

With innerXHTML:

var container = document.getElementById('container');
var markup = '<div id="content"><p class="text">Hello world!</p></div>';
var code = innerXHTML(container, markup);

This replaces the content of #container with the HTML in markup as XHTML.

Compatibility

innerXHTML aims to be cross-browser compatible. Browsers not listed here haven't been tested yet, but will likely work, too. If you test browsers not mentioned here, let us know of your testing results.

Browser Platform Comments
Camino Mac
Firefox Windows
Firefox Mac
Flock Windows
IE 7 Windows Reads unnecessary attributes for elements, such as <img />.
IE 6 Windows
IE 5 Windows IE5 does not translate <!--comments-->.
Opera Windows Writes uppercase element tags and attribute names. Writes unnecessary attributes, such as shape="rect".
Safari Mac
Something went wrong with that request. Please try again.