CODEWITHSUNDEEP
javascripthtmldom
cj333
cj333

Reputation: 2609

How do I insert a space before and after the content of a DOM element?

If i have

<p>someword here</p>
<span>another thing here</span>
<div id="text">other thing here</div>
<!-- any other html tags -->

How do I insert a space in first and last position of the content?

I want the result to be

<p> someword here </p>
<span> another thing here </span>
<div id="text"> other thing here </div>
<!-- after tags like <p> and before </p> there have one space -->

Upvotes: 2

Views: 8416

Answers (5)

c69
c69

Reputation: 21517

Naive (and incorrect!) example would be:

var victims = document.querySelectorAll('body *');
for( var i = 0; i < victims.length; i++ ) {
    victims[i].innerHTML = " " + victims[i].innerHTML + " ";
}

But once you run it, you will find out that all your elements got destroyed! Because, when you are changing innerHTML, you are changing element children as well. But we can avoid that, by not replacing content, but adding it:

var padLeft = document.createTextNode( " " );
var padRight = document.createTextNode( " " );
victims[i].appendChild( padRight );
victims[i].insertBefore( padLeft, victims[i].firstChild );

Looks cool! But, o no - we ruin our script tags, images and so on. Lets fix that too:

var victims = document.querySelectorAll('body *');
for( var i = 0; i < victims.length; i++ ) {
  if( victims[i].hasChildNodes ) {
    var padLeft = document.createTextNode( " " );
    var padRight = document.createTextNode( " " );
    victims[i].appendChild( padRight );
    victims[i].insertBefore( padLeft, victims[i].firstChild );
  }
}

Here you got the script :) Its not cross-browser all the way down to Netscape4, but is enough to understand basic idea.

Upvotes: 8

roberkules
roberkules

Reputation: 6605

in your case:

$("*").html(function(index, html){ return " " + html + " "; });

Upvotes: 0

Marshall
Marshall

Reputation: 4766

If you insist using JS + RegExp to pad every element's innerHTML then you could do:

var 
    r = /(<[^>]+>)(.*)(<\/[^>]+>)/g,
    func = function(str) { 
        return str.replace(r, function(original, a, b, c) {
            return a + ' ' + (r.test(b) ? func(b) : b) + ' ' + c;
        });
    };

func("<p name='somename'>someword here</p>");
// "<p name='somename'> someword here </p>"

func("<div>I have things here<span>And more here<p>And even more here</p></span></div>");
// "<div> I have things here<span> And more here<p> And even more here </p> </span> </div>"

This is just to show how you could do this, but I highly recommend against it. The examples I provide is extremely simple. Anything like a normal page (say, the one you are looking at now) has all sorts of tags. This would be extremely exhaustive. And not very wise.

Upvotes: 2

harpo
harpo

Reputation: 43168

With jQuery*:

$('#id').html(' ' + $('#id').html() + ' ');

If you know that the elements do not have nested elements, it would be better to use the simpler:

$('#id').text(' ' + $('#id').text() + ' ');

(*) The reason for using jQuery and not plain javascript is that browsers (I'm looking at you, IE), have different inbuilt properties for getting and setting these values. jQuery saves you from having to worry about that.

Upvotes: 0

yoozer8
yoozer8

Reputation: 7489

For a single element (as you seem to be asking):

element.html(' ' + element.html() + ' ')

For every element on the page (as your example seems to indicate), apply that to each element.

Upvotes: 0

Related Questions