javascript - 如何在 DOM 元素的内容前后插入空格？

Question

如果我有

<p>someword here</p>
<span>another thing here</span>
<div id="text">other thing here</div>
<!-- any other html tags -->

如何在内容的第一个和最后一个位置插入空格？

我想要的结果是

<p> someword here </p>
<span> another thing here </span>
<div id="text"> other thing here </div>
<!-- after tags like <p> and before </p> there have one space -->

Answer 1

天真的(而且不正确!)例子是:

var victims = document.querySelectorAll('body *');
for( var i = 0; i < victims.length; i++ ) {
    victims[i].innerHTML = " " + victims[i].innerHTML + " ";
}

但是一旦你运行它，你会发现你所有的元素都被破坏了!因为，当您更改 innerHTML 时，您也在更改子元素。但是我们可以通过不替换内容而是添加内容来避免这种情况:

var padLeft = document.createTextNode( " " );
var padRight = document.createTextNode( " " );
victims[i].appendChild( padRight );
victims[i].insertBefore( padLeft, victims[i].firstChild );

看起来很酷!但是，哦不——我们毁了我们的脚本标签、图像等等。让我们也解决这个问题:

var victims = document.querySelectorAll('body *');
for( var i = 0; i < victims.length; i++ ) {
  if( victims[i].hasChildNodes ) {
    var padLeft = document.createTextNode( " " );
    var padRight = document.createTextNode( " " );
    victims[i].appendChild( padRight );
    victims[i].insertBefore( padLeft, victims[i].firstChild );
  }
}

这里是脚本 :) 它不是一直到 Netscape4 的跨浏览器，但足以理解基本思想。