如何使用Javascript在文本节点中添加标记

这可能很容易/显而易见。 我正在写一个Chrome扩展。 我的Javascript从任何站点捕获文本节点，并将部分文本更改为其他内容。我想通过更改文本的颜色（添加标记）来标记更改后的文本

返回“+a+”

结果是：

<font color = "FF0000">SomeText</font>

SomeText

---

但是我想要的当然是SomeText将以红色显示。

您需要在样式表中添加颜色。。。

---

像

我建议您在chrome扩展中使用CSS。因此，我的解决方案将涉及给DOM元素（例如，它可能是一个段落或跨度）一个类。在HTML标记中放置样式属性不是很好的约定

<p class="red">SomeText</p>

那么这是如何使用JavaScript的呢？

您可以将类添加到元素中，而不是直接将样式添加到HTML标记中

document.getElementByTagName("p").className = "red";

或者，如果您想以特定ID为目标

document.getElementById("object").className = "red";

文本将是红色的。由于您可以将红色类添加到DOM中任何对象的任何类属性中，因此代码看起来比到处抛出样式更干净

我希望这对你有帮助。如果不是，请告诉我

function newText(tag, text, style) {
    var element = document.createElement(tag);              //this creates an empty node of the type specified
    element.appendChild(document.createTextNode(text));     //this creates a new text node and inserts it into our empty node
    if (style) element.setAttribute('style', style);        //this sets the style in inline CSS (warning, this needs different syntax in IE)
    return element;                                         //this returns a DOM object
}

这将返回一个DOM对象，您需要将其附加到另一个节点

var myText = newText('p', 'This is some text!', 'color: red;');
document.getElementById('myTextBox').appendChild(myText);

---

字体标签？真正地ThiefMaster：我很久没有接触HTML了，谢谢你的评论。萨尔曼：它就在第一行代码中..问题被标记为JavaScript。你应该把这个建议作为评论发布。没错，让我做一些修改来改进答案。我可以动态创建CSS类（在JS函数中）而不是使用文件吗？如果DOM元素已经有一个类呢？它会改变它还是仅仅增加它？您的命名约定完全在控制之下。DOM元素可以有多个类，例如class=“car inactive”有两个类，car和inactive。但是您必须执行className+=“red”-使用jQuery addClass（）这个过程要容易得多；和removeClass（）；是的，您也可以在chrome扩展中使用jQuery。

function newText(tag, text, style) {
    var element = document.createElement(tag);              //this creates an empty node of the type specified
    element.appendChild(document.createTextNode(text));     //this creates a new text node and inserts it into our empty node
    if (style) element.setAttribute('style', style);        //this sets the style in inline CSS (warning, this needs different syntax in IE)
    return element;                                         //this returns a DOM object
}

var myText = newText('p', 'This is some text!', 'color: red;');
document.getElementById('myTextBox').appendChild(myText);