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
    Camera and Video Control with HTML5

    Client-side APIs on mobile and desktop devices are quickly providing the same APIs.  Of course our mobile devices got access to some of these APIs first, but those APIs are slowly making their way to the desktop.  One of those APIs is the getUserMedia API...

Incredible Demos

  • By
    Web Notifications API

    Every UI framework has the same set of widgets which have become almost essential to modern sites: modals, tooltips, button varieties, and notifications.  One problem I find is each site having their own widget colors, styles, and more -- users don't get a consistent experience.  Apparently the...

  • By
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

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!