Question

TD innerHTML内容中的某些内容阻止其被替换，请参阅https://jsfiddle.net/ot8vfwc0/

如果有那种隐藏的奇怪字符，如何强制以编程方式替换它？

    <table>
    <thead>
        <tr>
        <th scope="col" colspan="1">TITLE</th>
        </tr>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>

            <td><br>WEIRD 
                DO NOT WANT TO BE REPLACED</td> 


        </tr>
    </tbody>
</table>

脚本：

    var myTable = document.getElementsByTagName('table')[0];
    var myTbody = myTable.getElementsByTagName('tbody')[0]; 
    _tr = myThead.getElementsByTagName("TR")[0];
    _td = _tr.getElementsByTagName("TD")[0]; 
    _th.innerHTML = "TEXT REPLACED";

Answer 1

这是一些非常奇怪的1998 JavaScript元素提取。更不用说你分配了这么多变量，你很明显忘记了你定义的变量。

用现代JS简化这个：

var td = document.querySelectorAll("table tbody tr td")[0];
td.textContent="new text";

这会将所有<td>元素作为table→tbody→tr→td链的一部分，我们选择第一个，然后设置其新内容。 as text ，而不是HTML，因为如果内容来自任何内容，那将是愚蠢的，并且存在潜在的安全风险，而不是硬编码＆＃34;。

如果我们想在其中添加DOM元素，我们当然会使用document.createElement(...)和td.appendChild(...)：

// find and clear the element
var td = document.querySelectorAll("table tbody tr td")[0];
td.textContent='';

// form new content and add it in
var p = document.createElement("p");
p = "check me out, I'm a paragraph";
td.appendChild(p);

保持简单：使用现代JavaScript。在过去的17年里，它变得相当简单。

Answer 2

试试这个：

var myTable = document.getElementsByTagName('table')[0];
var myTbody = myTable.getElementsByTagName('tbody')[0]; 
_tr = myTbody.getElementsByTagName("TR")[0];
_td = _tr.getElementsByTagName("TD")[0];
_td.innerHTML = "TEXT REPLACED";

将myThead替换为myTbody，将_th替换为_td。

Answer 3

myThead和_th未定义。将其替换为myTbody和_td，它会起作用。

为什么我不能在这种情况下替换innerHTML

3 个答案: