Wrap all non-child HTML into a DOM-element
<p>I am working on a little hyphenation engine for a website, and I got to get my head around this. I am matching all <code>p.hyphenatable</code> and send the content to a PHP-script to have it hyphenated like this:</p>

<pre><code>jQuery(".hyphenatable").each(function() {
    var hyphenatableObject = jQuery(this);

    if (hyphenatableObject.children().size() == 0){ //  Hyphenate only if there is no child elements to prevent HTML from being omitted

        jQuery.ajax({
            type: "POST",
            url: phpHyphenatorUrl,
            data : {
                language:hyphenationLang,
                text: hyphenatableObject.text()
            },
            dataType: "html",
            success: function(data) {
                hyphenatableObject.html(data);
            }
        });
    }
});
</code></pre>

<p>To be able to have this script work on elements with children as well, I would like to wrap the non-encapsulated parts of the matched selectore into new elements, and send those to the web service. For example:</p>

<pre><code>&lt;p&gt;My text &lt;img src="img.jpg" /&gt; with image&lt;/p&gt;
</code></pre>

<p>becomes</p>

<pre><code>&lt;p&gt;&lt;span class="whatever"&gt;My text&lt;/span&gt; &lt;img src="img.jpg" /&gt; &lt;span class="whatever"&gt;with image&lt;/span&gt;&lt;/p&gt;
</code></pre>

<p>Any ideas on that?</p>
