Javascript 如何通过javascript添加<span>？

How to add the <span> by javascript?

提问by John

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

可能的重复：
如何使用 Javascript 向 html 页面添加/删除 CSS/颜色样式？

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

我有一个关于 HTML 和 javascript 的问题。我得到了以下段落。

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

是否有可能在用户之后有以下结果

1. select the highlighted text by mouse
2. click the button

1. 通过鼠标选择突出显示的文本
2. 点击按钮

e.g.

例如

1. highlight the 'statement1,'
2. click the button

1. 突出显示“statement1”，
2. 点击按钮

Expected Result:

预期结果：

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

##### 更新代码，但没有工作

// 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);

回答by Nivas

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

您可以从@Pezhvak IMV 的回答中获取选定的文本：

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:

要添加元素，您必须创建一个 DOM 节点，设置其属性并添加元素：

1. Create a DOM node:

   var newSpan = document.createElement('span');

2. Set the class

   newSpan.setAttribute('class', 'ABC');

3. Add the span to under the <p>(The <p>should have a id or some mechanism of identifying it:

   <p id="text">

4. Add the <span>to under the <p>

   document.getElementById('text').appendChild(newSpan);

5. And set the text

   newSpan.innerHTML = selectedText;

1. 创建一个 DOM 节点：

   var newSpan = document.createElement('span');

2. 设置班级

   newSpan.setAttribute('class', 'ABC');

3. 将 span 添加到<p>(The<p>应该有一个 id 或某种识别它的机制：

   <p id="text">

4. 在<span>下面添加<p>

   document.getElementById('text').appendChild(newSpan);

5. 并设置文本

   newSpan.innerHTML = selectedText;

You can also use createTextNode(alternative for step 5)

您也可以使用createTextNode（替代步骤 5）

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

回答by Nivas

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; }