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 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...

  • By
    How I Stopped WordPress Comment Spam

    I love almost every part of being a tech blogger:  learning, preaching, bantering, researching.  The one part about blogging that I absolutely loathe:  dealing with SPAM comments.  For the past two years, my blog has registered 8,000+ SPAM comments per day.  PER DAY.  Bloating my database...

Incredible Demos

  • By
    Using MooTools For Opacity

    Although it's possible to achieve opacity using CSS, the hacks involved aren't pretty. If you're using the MooTools JavaScript library, opacity is as easy as using an element's "set" method. The following MooTools snippet takes every image with the "opacity" class and sets...

  • By
    MooTools CountDown Plugin

    There are numerous websites around the internet, RapidShare for example, that make you wait an allotted amount of time before presenting you with your reward. Using MooTools, I've created a CountDown plugin that allows you to easily implement a similar system. The MooTools JavaScript The CountDown class...

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!