Question

我正在研究这个appendChild（）方法的例子。但不同之处在于我正在尝试动态地向div添加更多文本。这很好。但是困难的部分是我要添加的文本将是颜色是红的。我可以这样做吗？我试过了

  text.setAttributes('color',"red");

但它没有工作。那么，这项任务怎么办？请帮助，谢谢!!!!

完整代码如下............

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function create_text(){
    var mydiv = document.getElementById("mydiv");
    var text = document.createTextNode(" New text to add.");

    mydiv.appendChild(text);
}
</script>
</head>
<body>
<button onclick="create_text();">Create Text Node</button>
<div id="mydiv">Welcome, here is some text.</div>
</body>
</html>

Answer 1

您通常必须使用CSS属性，但是，文本节点不能应用CSS属性。因此，您需要另一个容器元素：

您可以选择所需的任何容器元素，例如div，span等。它只需要能够包含文本节点。有了一个元素，我们就可以访问styles属性并设置各种样式（在你的情况下为color属性）。

→ jsFiddle

function create_text(){
    var mydiv = document.getElementById("mydiv");

    var container = document.createElement("span");
    var text = document.createTextNode(" New text to add.");

    container.appendChild(text);
    container.style.color = "red";

    mydiv.appendChild(container);
}

进一步说明：

appendChild的颜色分配和调用的顺序是任意的。以下也是可能的：

function create_text(){
  var mydiv = document.getElementById("mydiv");

  var container = document.createElement("span");
  var text = document.createTextNode(" New text to add.");

  container.appendChild(text);
  mydiv.appendChild(container);

  container.style.color = "red";
}

Answer 2

如果您的div中包含所有内容，则可以尝试

document.getElementById("mydiv").style.color="#ff0000";

Answer 3

mydiv.style.color = 'red';

或仅在css

#mydiv { color: red; }

如果你在div中有其他元素，你不想变成红色，你需要在追加之前将新文本包装在span或div或其他元素中。

使用jquery这将非常简单：

$('#mydiv').append('<span style="color:red">this is new text</span>');

动态添加颜色添加到文本中

3 个答案: