javascript - 在 javascript 中创建的跨度在网页中显示为 [object HTMLSpanElement]

Question

我在 javascript 中创建了一个 span 标签并使用 .innerHTML 我试图将它附加到另一个标签中。但在网页中它显示为 [object 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>

Answer 1

您正在尝试将对象引用插入到字符串中。在设置目标的 innerHTML 之前，您可以获得表示跨度的 HTML 并将 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>