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
    6 Things You Didn&#8217;t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving...

  • By
    Send Text Messages with PHP

    Kids these days, I tell ya.  All they care about is the technology.  The video games.  The bottled water.  Oh, and the texting, always the texting.  Back in my day, all we had was...OK, I had all of these things too.  But I still don't get...

Incredible Demos

  • By
    Create Custom Events in MooTools 1.2

    Javascript has a number of native events like "mouseover," "mouseout", "click", and so on. What if you want to create your own events though? Creating events using MooTools is as easy as it gets. The MooTools JavaScript What's great about creating custom events in MooTools is...

  • By
    MooTools Zoomer Plugin

    I love to look around the MooTools Forge. As someone that creates lots of plugins, I get a lot of joy out of seeing what other developers are creating and possibly even how I could improve them. One great plugin I've found is...

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!