如何通过javascript添加<span>？ [复制]

Question

可能重复：
How to use the Javascript to add/remove the CSS/colour style to the html page?

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

function add_span(){
     // ??
}

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

用户之后有没有可能出现如下结果

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

例如

1. 突出显示“语句 1”
2. 点击按钮

预期结果：

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

Answer 1

回答你的部分问题：

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

Answer 2

您可以从@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;
}

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

1. 创建一个 DOM 节点：

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

2. 设置类

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

3. 将跨度添加到<p> 下（<p> 应该有一个 id 或某种识别它的机制：

   <p id="text">

4. 将<span> 添加到<p> 下

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

5. 并设置文字

   newSpan.innerHTML = selectedText;

您也可以使用createTextNode（第 5 步的替代方法）

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