javascript - 如何在 之后设置文本样式？

Question

我正在尝试使用 clone()，我已经接近它了，但我无法替换文本，它同时显示:

var td_clone = $('.ms-vb').clone();
$('span', td_clone).remove();
$('br', td_clone).remove();
var name = $.trim(td_clone.text());
$("td").append(name.toUpperCase());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table>
    <tr>
        <td width="80%" style="padding-bottom: 3px" class="ms-vb">
            <span class="ms-announcementtitle">
                title is here
            </span>
            <br>
            by hey
        </td>
    </tr>
</table>

结果:

title is here 
by hey BY HEY

在我期待的时候:

title is here 
BY HEY

jsFiddle here

Answer 1

你做的不对，直接定位textNode

var node = document.querySelector('.ms-vb br').nextSibling;

node.textContent = node.textContent.toUpperCase();

<table>
    <tr>
        <td width="80%" style="padding-bottom: 3px" class="ms-vb">
            <span class="ms-announcementtitle">
                title is here
            </span>
            <br>
            by hey
        </td>
    </tr>
</table>

更像 jQuery 的是使用 contents()，它实际上返回注释和文本节点，但是当普通 JS 解决方案如此简单时，确实没有必要这样做，而且jQuery 版本包含几乎相同的用于设置文本的代码

$('.ms-vb').contents().each(function() {
    if (this.nodeType === 3) 
        this.textContent = this.textContent.toUpperCase();
});