使用 innerText 和 innerHTML 在 JavaScript 中操作 DOM

在这些日子里,前端框架都是愤怒的。与虚拟 DOM 一起工作,虽然更高效,但当你所需要做的只是在现有静态页面上调整几个元素时,可以带来大量的麻烦。

拿出那些React、Angular、Vue以及我没有提及的任何热门的新框架!

开始

要在家跟进,你所需要的只是一个网页浏览器和一个页面来操纵。

为了方便,我们可以加载任何网页,打开浏览器的控制台,并用我们自己的HTML文档加载它:

1document.getElementsByTagName('body')[0].innerHTML = '<div id="gator">Alligators rule!!</div>';

一旦你打入,现有的页面将完全取代一些HTML和关于每个人最喜欢的爬行动物的普遍真相。

编辑文本

好吧,所以在开始的部分,我们 sorta 跳过枪,已经使用了innerHTML来操纵页面上的某些元素。

要稍微备份,让我们先改变页面上的一个元素的文本,这样我们就需要选择我们的元素,然后使用innerText来设置内容:

1document.getElementById('gator').innerText = 'OF COURSE alligators rule!';

对它来说不多!

如果您想将文本预订为现有文本字符串,则可以使用内部文本获取当前文本,然后预订为它:

1const currentText = document.getElementById('gator').innerText;
2const nextText = 'Do alligators rule? ' + currentText;
3document.getElementById('gator').innerText = nextText;

附加文本更容易,因为我们可以使用 +=:

1document.getElementById('gator').innerText += ' This definitely true.';

编辑HTML

这一切都很好,但当我们试图引入HTML时,比如将字符串包裹在强中时,事情就会崩溃。

由于内部文本与元素的文本内容一起工作,所以像HTML标签这样的东西最终会被显示,就好像<和>被编码为<和>。

但是,当我们想要使用额外的标记时,我们所需要做的就是将innerText替换为innerHTML,并在路上:

1document.getElementById('gator').innerHTML = '<strong>OF COURSE</strong> alligators rule!';

和innerHTML一样,我们可以捕捉到预先对它的值,然后使用+=对它的附加值:

1const currentHTML = document.getElementById('gator').innerHTML;
2const nextHTML = 'Do alligators rule? ' + currentHTML;
3document.getElementById('gator').innerHTML = nextHTML;
4
5document.getElementById('gator').innerHTML += ' This definitely true.';

这还不是全部,当我们使用innerHTML时,我们可以做的不仅仅是编辑一个元素的文本,我们也可以使用它来添加额外的标记,例如在HTML表的情况下:

 1document.getElementById('gator').innerHTML = `
 2  <table border="1">
 3    <thead>
 4      <tr>
 5        <th>Reptile</th>
 6        <th>Awesomeness</th>
 7      </tr>
 8    </thead>
 9    <tbody id="tableRows">
10      <tr>
11        <td>Alligator</td>
12        <td>9001</td>
13      </tr>
14    </tbody>
15  </table>
16`;

随后,我们可以使用innerHTML将新行附加到飞行表中:

1document.getElementById('tableRows').innerHTML += `
2  <tr>
3    <td>Snake</td>
4    <td>-1</td>
5  </tr>
6`;

结论

当然,使用innerText和innerHTML并不接近利用虚拟DOM的前端框架的力量,但嘿,它完成了工作。

幸运的是,在innerHTML是使用JavaScript编辑元素的唯一可用选项的日子已经过去了,尽管我们已经走了一段很长的路,但知道这些事情总是很好的,所以你不会把整个框架扔到一个微不足道的问题上。