logo标签列表

在使用 createTextNode 函数时，在段落中使用 <span> 元素

javascripthtml
5

我希望在一个段落中染色一个单词，但是我用 TextNode 创建了这个段落，所以显示为一些文本。

示例：

<!DOCTYPE html>
<html>
<body>

<p>Click the button to create a Text Node.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var t = document.createTextNode("Hello World <span style=\"color: #BA0000\">error</span> ");
  document.body.appendChild(t);
}
</script>

</body>
</html>

5个回答
4
你想创建一个元素而不是文本。textNode将显示你提供的任何文本，而不是构建出你传递的html。因此，你需要单独创建变量中的元素或使用类似的父元素的innerHTML设置任何内容。
尝试创建一个像段落标签一样的元素，然后设置它的innerhtml如下所示：
 var t = document.createElement('p');
 t.innerHTML = "Hello World <span style=\"color:#BA0000\">error</span> ";

这将会给你想要的带有HTML元素的内容，而不仅仅是文本。请参见下面的示例。 

<!DOCTYPE html>
<html>
<body>

<p>Click the button to create a Text Node.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var t = document.createElement('p');
  t.innerHTML = "Hello World <span style=\"color:#BA0000\">error</span> ";
  document.body.appendChild(t);
}
</script>

</body>
</html>

2

您需要创建一个元素。使用createTextNode只会创建文本。

以下是使用createElement实现此目的的方法：

function myFunction() {
  var span = document.createElement("span");
  span.style.color = "#BA0000";
  span.innerText = "error";
  document.body.appendChild(span);
}

所以你的完整代码应该是这样的：

<!DOCTYPE html>
<html>
<body>

<p>Click the button to make a BUTTON element.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  var t = document.createTextNode("Hello World ");
  var span = document.createElement("span");
  span.style.color = "#BA0000";
  span.innerText = "error";
  document.body.appendChild(t);
  document.body.appendChild(span);
}
</script>

</body>
</html>

2

当您创建文本节点时，它不会解析要打印的HTML。您可能希望稍微更改代码，使其类似于以下内容，从而创建HTML元素：

var t = document.createElement('p');
t.innerText = "Hello World ";

var s = document.createElement('span');
s.style.color = "#BA0000";
s.innerText = "Error";
t.appendChild(s);

document.body.appendChild(t);

这将创建您期望的结果。
1
你应该创建一个 span 元素并将其附加到 body。 

<!DOCTYPE html>
<html>
<body>

<p>Click the button to create a Text Node.</p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
const span = document.createElement('span');
span.textContent = 'error'
span.style.cssText = 'color: #BA0000';

  var t = document.createTextNode("Hello World ");
    document.body.appendChild(t);
  document.body.appendChild(span);
}
</script>

</body>
</html>

-1

createTextNode（）{{link1：用于转义HTML代码}}。尝试通过使用ID选择器定位元素来改变颜色。这里有一个示例

<p>Click the button to create a Text Node<span id='color_me'>color me</span></p>

<button onclick="myFunction()">Try it</button>

<script>
function myFunction() {
  document.getElementById("color_me").style.color = "#ff0000";
}
</script>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接