How to add the by javascript?

Question

Possible Duplicate:
How to use the Javascript to add/remove the CSS/colour style to the html page?

I have a question on the HTML and javascript. I got the following paragrahe.

function add_span(){
     // ??
}

<input type="button" onclick="add_span()" value="add span"/>
<p> statement1, statement2, statement3 </p>

Is it possible to have the following result after the user

select the highlighted text by mouse
click the button

e.g.

highlight the 'statement1,'
click the button

Expected Result:

<input tupe="button" onclick="add_span()" value"add span"/>
<p> <span class="ABC">statement1,</span> statement2, statement3 </p>

##### Updated Code, but no work

// updated code in the add_span

    var selectedText;

    if (window.getSelection)
    {
        selectedText = window.getSelection();
    }
    else if (document.getSelection) // FireFox
    {
        selectedText = document.getSelection();
    }
    else if (document.selection)  // IE 6/7
    {
        selectedText = document.selection.createRange().text;
    }

    //create the DOM object
    var newSpan = document.createElement('span');
    // add the class to the 'spam'
    newSpan.setAttribute('class', 'ABC');
    document.getElementById('text').appendChild(newSpan);   
    var selectedTextNode = document.createTextNode(); 
    newSpan.appendChild(selectedTextNode);

I'm hoping they're just typos from writing the question, but you have misspelled `type`, and are also missing an `=` after `value` on your `input` element. — James Allardice, Jul 14 '11 at 07:10
You [already asked](http://stackoverflow.com/questions/6689065/how-to-use-the-javascript-to-add-remove-the-css-colour-style-to-the-html-page) this question. — Albireo, Jul 14 '11 at 07:51

score 5 · Answer 1 · edited Jun 25 '19 at 17:24

5

You can get selected text from @Pezhvak IMV's answer:

var selectedText;
if (window.getSelection)
{
    selectedText = window.getSelection();
}
else if (document.getSelection) // FireFox
{
    selectedText = document.getSelection();
}
else if (document.selection)  // IE 6/7
{
    selectedText = document.selection.createRange().text;
}

To add a element, you have to create a DOM node, set its attributes and add the element:

Create a DOM node:

var newSpan = document.createElement('span');
Set the class

newSpan.setAttribute('class', 'ABC');
Add the span to under the  (The  should have a id or some mechanism of identifying it:


Add the  to under the 

document.getElementById('text').appendChild(newSpan);
And set the text

newSpan.innerHTML = selectedText;

You can also use createTextNode (alternative for step 5)

var selectedTextNode = document.createTextNode(); 
newSpan.appendChild(selectedTextNode);

edited Jun 25 '19 at 17:24

Community

1
1

answered Jul 14 '11 at 07:26

Nivas

18,126
4
62
76

thank you for your answer, and i still have some questions. After I add the code in the javascript, the location is wrong, it add to the end of the
, not the suitable position. I have updated the code, would you mind to see one more?
– John Jul 14 '11 at 07:40
@John, I am sorry, I did not first get the full context of the question. You want to highlight selected text, these should help: http://stackoverflow.com/questions/6240139/highlight-text-range-using-javascript, http://stackoverflow.com/questions/2584301/getselection-surroundcontents-across-multiple-tags/2584352#2584352, http://stackoverflow.com/questions/2582831/highlight-the-text-of-the-dom-range-element – Nivas Jul 14 '11 at 07:59

score 2 · Answer 2 · answered Jul 14 '11 at 07:05

To answer part of you question:

function getSelText() {
    var txt = '';
     if (window.getSelection)
    {
        txt = window.getSelection();
             }
    else if (document.getSelection) // FireFox
    {
        txt = document.getSelection();
            }
    else if (document.selection)  // IE 6/7
    {
        txt = document.selection.createRange().text;
            }
    else return; document.aform.selectedtext.value =  txt; }

How to add the by javascript?

2 Answers2