javascript - 更改 DOM 中未标记的元素

Question

我正在寻找一种方法来操作 DOM 中未标记的元素，如果不可能，最好使用 CSS，而不是使用 JQuery。

在这个例子中，一个 JS 文件填充了 HTML，但是这个人没有用标签包装分隔符/管道。

我有哪些选择？

Answer 1

要正确执行此操作，您需要找到有问题的脚本并添加您的 <span> | 周围的标签.你也可以像这样猴子修补它，它也会工作(但不要!):

您可以重用我写给您的方法，用任何字符或字符集/元素/等替换任何元素中的任何字符。

var targetSelector = '.small';

function wrapChar(targetSelector, char, replaceWith) {
  'use strict';

  var content = $(targetSelector).html();
  content = content.replace(new RegExp(/\|/, "g"), replaceWith);

  return content;

}


$(function() {

  $(targetSelector).html(wrapChar(targetSelector, ['|'], '<span class="pipe">|</span>'));

});

.pipe {
  font-size: 3em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="small">
      <a href="#">test 1</a>
      |
      <a href="#">test 2</a>
      |
      <a href="#">test 3</a>
      |
      <a href="#">test 4</a>
    </td>
  </tr>
</table>

http://codepen.io/nicholasabrams/pen/PNBomg?editors=1010