Почему я не могу заменить innerHTML в этом случае

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

Это довольно странный случай извлечения JavaScript 1998 года. Не говоря уже о том, что вы выделяете столько варов, вы явно забываете, какие из них вы определили.

Упростить это с современной JS вместо:

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

Это становится все <td> элементы часть table→tbody→tr→td цепи, мы выбираем первый, то мы устанавливаем его новое содержание. как текст, а не как HTML, потому что это было бы глупо и потенциально опасно для безопасности, если контент исходит из чего-либо «не жестко закодированного».

Если мы хотим добавить 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, и он будет работать.