Wrapping Text Nodes and Elements with JavaScript

By  on  

When you work on a site that relies on a given JavaScript toolkit, you unintentionally end up trying to solve problems within the bounds of the toolkit and not the language.  Such was the case when I tried wrapping text (possibly including HTML elements) with a DIV element.  Imagine the following HTML:

This is some text and <a href="">a link</a>.

And say you want to turn that into the following:

<div>This is some text and <a href="">a link</a>.</div>

You could do a simple .innerHTML update on the parent but the problem with that is any event connections would be severed because innerHTML creates new elements from HTML.  Damn.  So it's time to retreat to basic JavaScript -- glory for some and failure for others.  Here's how to make it happen:

var newWrapper = document.createElement('div');
while(existingParent.firstChild) {
	newWrapper.appendChild(existingParent.firstChild);
}

Using a for loop wont work because childNodes is a live node collection, so moving it would affect the the indexes.  Instead we can do continuous firstChild checks on the parent until a falsy value is returned and then you know all children have been moved!

Recent Features

  • By
    CSS Filters

    CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. Let's have...

  • By
    CSS 3D Folding Animation

    Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...

Incredible Demos

  • By
    Reverse Element Order with CSS Flexbox

    CSS is becoming more and more powerful these days, almost to the point where the order of HTML elements output to the page no longer matters from a display standpoint -- CSS lets you do so much that almost any layout, large or small, is possible.  Semantics...

  • By
    dat.gui:  Exceptional JavaScript Interface Controller

    We all love trusted JavaScript frameworks like MooTools, jQuery, and Dojo, but there's a big push toward using focused micro-frameworks for smaller purposes. Of course, there are positives and negatives to using them.  Positives include smaller JS footprint (especially good for mobile) and less cruft, negatives...

Discussion

  1. MaxArt

    appendTo is a jQuery method, you may want to fix that.

    By the way, DOM Level 4 specs should add the append method that essentially does the same:
    https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#mutation-methods

    Checking children seems redundant, as it’s never a falsy value.

    Without using another variable, that’s what I used to do:

    while (existingParent.firstChild)
        newWrapper.appendChild(existingParent.firstChild);
    
    • Bleh — I took the sample from my MDN stuff, which is jQuery. Updated!

  2. cachaito

    Hi David, can you explain what is existingParent.

    • Sure — the existingParent is the current parent of the text, which you could get with querySelector, getElementById, or other DOM means.

  3. Kyll

    Plop!

    You forgot to close the div:
    This is some text and a link.
    (Unless it’s a super subtle way of showing the drawbacks of ugly innerHTML wraps, which are super sensible to stupid mistakes)

    Thanks for the tip! This code looks elegant and optimized =D

  4. cachaito

    David, there is more interesting case:

    Lets assume, we have couple of those links:
    This is some text and a link.

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!