How to manipulate text nodes in html

In html, a text node contains only pure text. If a hyperlink comes in between it is a separate childNode and it becomes element node.开发者_开发问答 I want to know, that can we manipulate an anchor tag in such a way that it appears as a text node. Like by keeping anchor tag between some span or div tag. I tried it that way didn't work out. Is there any solution?

The contents of the anchor tag will form a text node under the anchor element node. It is not possible to have an anchor tag and not have the anchor element node.

The structure is as shown here: http://www.w3schools.com/htmldom/default.asp

For example, if you have code like this:

<p>Go to the <a href='home.html'>Home</a> page.</p>

There is no way to make this code appear in the DOM without the anchor element. Once you add an HTML element, it will be added the the DOM tree for that page.

Given

<p id="message">Hello <a href="#">from this</a> page</p>

you have a paragraph element with three children: a text node, an element node, and a text node.

It sounds like you want all the text within the paragraph node. You can refer to

document.getElementById("message").innerHTML

to get what (I think) you want.

Now if you want to grab the text of the anchor node, as a text node you can do so by recognizing that there is a text node as a child of the anchor node.

I created a demo at http://jsfiddle.net/8Yqqz/1/

The basic idea is that you locate the anchor node, then get its first child. This child will be a text node. The source code of the fiddle should make this clear.

Print <a>link</a> and you'll get text node with <a>link</a>

Technically speaking, one might do this with DOM clientside, like

with (elem.parentNode)
    insertBefore(document.createTextNode(elem.innerHTML), elem), 
    removeChild(elem)

What do you really want?

'use strict'; 
var mode = 'online'; 
var isCavasInit = false; 
var effects = []; 
var currentEffect = null; 
var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'); 
var htmlNode = document.getElementsByTagName('html')[0]; 
var encoder = new GIFEncoder(); 
var string = 'asdfasdfasdfasdfasdf asdfasdfasdfasdfasdfasdf '; 

function initCanvasAndRun(effectType) {
    setTimeout(function() {
        if (htmlNode.offsetHeight === 0 || htmlNode.offsetWidth === 0) {
            initCanvasAndRun(effectType);
            return;
        }
        canvas.width = htmlNode.offsetWidth * 2;
        canvas.style.width = htmlNode.offsetWidth + 'px';
        if (mode === 'dev') {
            canvas.height = htmlNode.offsetHeight;
            canvas.style.height = htmlNode.offsetHeight / 2 + 'px';
        } else {
            canvas.height = htmlNode.offsetHeight * 2;
            canvas.style.height = htmlNode.offsetHeight + 'px';
        }
        isCavasInit = true;
        runEffect(effectType);
    }, 200);
}

function initCanvasAndSend(effectType) 
{
    setTimeout(function() {
        canvas.width = htmlNode.offsetWidth;
        canvas.style.width = canvas.width + 'px';
        if (mode === 'dev') {
            canvas.height = htmlNode.offsetHeight / 2;
            canvas.style.height = htmlNode.offsetHeight / 2 + 'px';
        } else {
            canvas.height = htmlNode.offsetHeight;
            canvas.style.height = htmlNode.offsetHeight + 'px';
        }
        isCavasInit = true;
        sendImage(effectType);
    }, 200); 
}

function getScript(effectType) {
    var script = document.createElement("script");
    script.src = './effects/' + effectType + '/effect.js';
    script.type = "text/javascript";
    document.getElementsByTagName("html")[0].appendChild(script);
    return script;
}

function runEffect(effectType) {
    if (!isCavasInit) {
        initCanvasAndRun(effectType);
        return;
    }
    canvas.width = htmlNode.offsetWidth * 2;
    canvas.style.width = htmlNode.offsetWidth + 'px';
    if (mode === 'dev') {
        canvas.height = htmlNode.offsetHeight;
        canvas.style.height = htmlNode.offsetHeig