Question

我有一个html页面，其中我有以下代码片段，具体取决于我们遵循的是哪种情况：

CASE 1)    <p> <span id ="xyz">  some code here  </span> </p>
CASE 2)    <p> <span id ="xyz">   </span> some code here </p>

现在在我的javascript代码中，我必须动态地在span xyz中写入值。如果我尝试通过id引用span xyz然后尝试更改其innerHTML，那么已经存在于span xyz中的html将丢失。

如果我在跨度之外保留额外的代码，由于某些css效果，它会出现在新行上。由于某些原因，我不能改变CSS。

Answer 1

您可以将当前值存储在String中，然后修改此字符串：

var mySpan = document.getElementById('xyz').innerHTML;
mySpan += ' and this gets added after the some code here';
document.getElementById('xyz').innerHTML = mySpan;

或更快，更简便，

document.getElementById('xyz').innerHTML = document.getElementById('xyz').innerHTML + ' new text after'; //to add text after the existing text
document.getElementById('xyz').innerHTML = 'your new text before ' + document.getElementById('xyz').innerHTML; //to add text before.

Answer 2

如果要保留旧文本，可以将新文本节点附加到span。

var newtext = document.createTextNode(" new text ");
var spanXyz = document.getElementById("xyz");
spanXyz.appendChild(newtext);

请参阅以下内容：createTextNode，appendChild

修改：要在开头添加新文字，您可以使用类似

的内容

spanXyz.textContent = "new text " + spanXyz.textContent;

Answer 3

document.getElementById('xyz').innerHTML = 'some code here' + 'dynamically code';

或

document.getElementById('xyz').innerHTML = 'dynamically code' + 'some code here' ;

使用javascript动态更改跨文本并保留原始文本

3 个答案: