在javascript中创建的span在网页中显示为[object HTMLSpanElement]

Created span in javascript is showing as [object HTMLSpanElement] in webpage

本文关键字：object HTMLSpanElement 网页 javascript 创建 span 显示      更新时间：2023-09-26

我用javascript创建了一个span标记，并使用.innerHTML将其附加到另一个标记中。但在网页中，它显示为[对象HTMLSpanElement]。

var text = "Accessor Properties Example";
var enteredText = 'Prop';
var data = text.split(enteredText);
var pTag = document.getElementById('ab');
var newSpan = document.createElement('span');
newSpan.setAttribute('class','highlight');
newSpan.innerHTML=enteredText;
console.log(newSpan)
var plainText = data[0]+newSpan+data[1];
pTag.innerHTML = plainText;
.highlight {color:#1a0dab;font-weight:bold}
<p id="ab"></p>

您正试图将对象引用插入字符串中。您可以获得表示跨度的HTML，并在设置目标的innerHTML之前将这3条信息添加在一起。

var text = "Accessor Properties Example";
var enteredText = 'Prop';
var data = text.split(enteredText);
var pTag = document.getElementById('ab');
var newSpan = document.createElement('span');
newSpan.setAttribute('class','highlight');
newSpan.innerHTML=enteredText;
console.log(newSpan)
var plainText = data[0]+ newSpan.outerHTML +data[1];  // <- Change made here
pTag.innerHTML = plainText;
.highlight {color:#1a0dab;font-weight:bold}
<p id="ab"></p>

这是因为您将字符串与DOM元素连接，DOM元素也被强制为字符串。

相反，您应该使用appendChild:

pTag.innerHTML = ''; // Remove existing contents
pTag.appendChild(document.createTextNode(data[0]));
pTag.appendChild(newSpan);
pTag.appendChild(document.createTextNode(data[1]));


var text = "Accessor Properties Example",
    enteredText = 'Prop',
    data = text.split(enteredText),
    pTag = document.getElementById('ab'),
    newSpan = document.createElement('span');
newSpan.className = 'highlight';
newSpan.textContent = enteredText;
pTag.innerHTML = '';
pTag.appendChild(document.createTextNode(data[0]));
pTag.appendChild(newSpan);
pTag.appendChild(document.createTextNode(data[1]));
.highlight {color:#1a0dab;font-weight:bold}
<p id="ab"></p>

相关文章：