在段落中使用<span>与createTextNode
在段落中使用<span>与createTextNode
提问于 2020-02-07 15:06:25
我想在一个段落上涂上一个单词，但是我用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
Stack Overflow用户
回答已采纳
发布于 2020-02-07 15:11:40
您希望创建一个元素而不是文本。textNode将显示您给它的任何文本，而不是构建传递它的html。因此，您需要在变量中创建元素，或者设置父元素的innerHTML，其中包含像<span>这样的任何内容。
尝试创建类似段落标记的元素，然后将其设置为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>
Stack Overflow用户
发布于 2020-02-07 15:11:59
您需要创建一个元素。使用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>
Stack Overflow用户
发布于 2020-02-07 15:12:59
创建文本节点时，它不会解析正在打印的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);这将创建您的预期结果。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60116055
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号