I dont know how to describe this but I'm sure you'll understand if you visit this link. /

I want to append text to a p element with javascript and I'm sucessful, but if the text contains a tag like <font> the tag is displayed as it is.

Should I add code to detect the html elements or it can be done any other means? if I do add code which detect font tag how to add the tag back to the text??

I dont know how to describe this but I'm sure you'll understand if you visit this link. http://jsfiddle/pahnin/yN3xf/

I want to append text to a p element with javascript and I'm sucessful, but if the text contains a tag like <font> the tag is displayed as it is.

Should I add code to detect the html elements or it can be done any other means? if I do add code which detect font tag how to add the tag back to the text??

• javascript
• jquery
• append

• 2 don't use font, use span. – zzzzBov Commented Oct 25, 2011 at 14:07
• It works fine if you simply append it: jsfiddle/yN3xf/2 – ayyp Commented Oct 25, 2011 at 14:09
• my intention is to append each letter after some time period – pahnin Commented Oct 25, 2011 at 14:28

4 Answers 4

You could simply replace var textcopied = $('.wele').html(); with var textcopied = $('.wele').text(); to extract the text without any HTML tags included. But then, of course, you won't get your tags back at all.

Update: A somewhat different approach uses jQuery animations to slide the entire title into view smoothly:

$(document).ready(function(){
    var $title = $('.wele');
    var twidth = $title.width();
    var theight = $title.height();
    $title.css({
        overflow: 'hidden',
        width: 0,
        whiteSpace: 'nowrap',
        height: theight
    }).animate({
        width: twidth 
    }, 5000); // milliseconds
});

http://jsfiddle/mblase75/yN3xf/16/

You could do something like this. Once all the text has been written out, then you replace the whole html of wele with the original text. It's not the best I admit.

http://jsfiddle/yN3xf/13/

$(document).ready(function() {
    var htmlcopied = $('.wele').html();
    var textcopied = $('.wele').text();
    $('.wele').text('');

    function foobar(i) {
        if (i < textcopied.length) {
            $('.wele').append(textcopied.charAt(i));
            setTimeout(function() {
                foobar(i + 1);
            }, 80);
        }
        else {
            $('.wele').html(htmlcopied);
        }
    }
    foobar(0);
});

UPDATE

This should give you the desired effect through different means. It has a div on top of the original text, and it slow reveals the text, which looks like it is being typed out.

Example

http://jsfiddle/guanome/LrbVy/

html

<div class="wele">Hi, there <span class="hl">special text</span>, normal text
    <div class="overlay"></div>
</div>

javascript

$(document).ready(function() {
    $('.overlay').css('width', $('div.wele').css('width'));
    $('.overlay').css('height', $('div.wele').css('height') + 15);
    var origWidth = $('.overlay').css('width').replace(/px/g,'');
    foobar(origWidth);
});

function foobar(i) {
    if (i > -10) {
        $('.overlay').css('width', i);
        setTimeout(function() {
            foobar(i - 10);
        }, 80);
    }
}

css

.hl{
    color: red;     font-family: helvetica; 
    background: #efefef; 
    color: black; 
    padding: 2px 7px; 
    -moz-box-shadow: 0 1px 1px #CCCCCC; 
    -webkit-box-shadow: 0 1px 1px #CCCCCC; 
    box-shadow: 0 1px 1px #CCCCCC;

}
div.wele
{
    position: relative;
    width: 500px;
}
.overlay
{
    position: absolute;
    right: 0;
    top: -3px;
    width: 100%;
    height: 25px;
    background-color: #FFF;
    z-index: 10;
}

UPDATE 2

With this change, the overlay will be added dynamically to the wele message, the width doesn't have to be set, and it will work with multiple lines easily.

http://jsfiddle/guanome/LrbVy/4/

html

<div class="wele">Hi, there <span class="hl">special text</span>, normal text</div>

javascript

$(document).ready(function() {
    showWele();
});

function foobar(i, overlay) {
    if (i > -10) {
        overlay.css('width', i);
        setTimeout(function() {
            foobar(i - 10, overlay);
        }, 80);
    }
    else {
        overlay.remove();
    }
}

function showWele() {
    var wele = $('div.wele');
    wele.append('<div class="overlay"></div>');
    wele.css('position', 'relative');
    var overlay = $('.overlay');

    overlay.css({
        'width': wele.css('width'),
        'height': (wele.outerHeight() + 5),
        'position': 'absolute',
        'right': '0',
        'top': '-3px',
        'background-color': '#FFF',
        'z-index': '10'
    });
    var origWidth = overlay.css('width').replace(/px/g, '');
    foobar(origWidth, overlay);
}

You can also achieve this by iterating over the root element's contents(), and outputting individually each of the children nodes, one by one.

When treating each of contents elements, if it is a text node, it is enough to output all characters with a timeout. If it is not a text node, clone the node and append it to the target element. All characters inside it can be appended in the same way.

See it working here: http://jsfiddle/yN3xf/36/

$(document).ready(function(){

    var $clonedContent = $('.wele').clone();
    $('.wele').textContent = '';
    $('.wele').text('');

    treatContents(0, $clonedContent, $('.wele'));

    function treatContents(num, container, target){
        var $originalNode = container.contents()[num];
        var $targetNode;
        if ($originalNode.nodeType == 3){
            $targetNode = target;
        }
        else{
            $targetNode = $(container.contents()[num]).clone(false, false).appendTo(target);
            $targetNode.text('');
        }
        $targetNode.textContent = '';
        writeCharacters($originalNode.textContent , 0, $targetNode, num, container, target);
    }

    function writeCharacters(origText, x, target, contNum, contCont, contTarg) {
        if(x<origText.length){
           target.append(origText.charAt(x));
            setTimeout(function() { writeCharacters(origText, x+1, target, contNum, contCont, contTarg); }, 80);
        }
        else{
            treatContents(contNum+1, contCont, contTarg);
        }
    }
});

This sample could be adapted to allow nested tags, for instance:

<p class="wele">Hi, there <b>bold text <i>bold italic text</i></b>, normal text</p>

Try replacing:

$('.wele').append(textcopied.charAt(i));

with:

textHTML += textcopied.charAt(i);
$('.wele').html(textHTML);

And at the begening of the code, put this:

var textHTML  = '';

It works, but it doesn't look very good :P