Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

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!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

  • By
    Regular Expressions for the Rest of Us

    Sooner or later you'll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In...

Incredible Demos

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);
    • David Walsh

      Bleh — I took the sample from my MDN stuff, which is jQuery. Updated!

  2. cachaito

    Hi David, can you explain what is existingParent.

    • David Walsh

      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!