阅读javascript香草创建的元素时出现问题？

Question

93/5000您好，我有一个关于在创建元素后读取元素的问题，我有以下示例

 function createTemplate() { return (` <div class="test1"> <div class="test2"> <tr> <td class="addth"></td> <td class="sumth"></td> </tr> <div> </div> `); } function readTemplate() { const read = document.querySelector('.sumth'); console.log(read); } function btnRead() { const insert = document.getElementById('content'); insert.innerHTML = createTemplate(); readTemplate(); } 

我的问题是，我第一次执行调用函数的按钮时未检测到“ sumth” td（即我需要使用的值），它检测到我为null，然后如果我再次赋予它以执行它检测到的按钮，我，但是因为我需要它以前的值，我现在捕获该值，因为此值是动态的，并且每次执行时都会更改。 请不知道我的错误是什么或如何读取创建的组件，谢谢。

Answer 1

tr和td标签不在table 。 如果将内部div标签更改为table ，它将正常工作。

function createTemplate()
{
  return (`
          <div class="test1">
            <table class="test2">
              <tr>  
                <td class="addth"></td>
                <td class="sumth"></td>
              </tr>
            </table>
          </div>
          `);
}

function readTemplate()
{
  const read = document.querySelector('.sumth');
  console.log(read);
}

function btnRead()
{
  const insert = document.getElementById('content');
  insert.innerHTML = createTemplate();
  readTemplate();
}

btnRead()

Answer 2

<tr>必须位于<table> ，而不是<div> 。 因此， <tr>和<td>标记将被忽略。

 function createTemplate() { return (` <div class="test1"> <table class="test2"> <tr> <td class="addth">Cell 1</td> <td class="sumth">Cell 2</td> </tr> </table> </div> `); } function readTemplate() { const read = document.querySelector('.sumth'); console.log(read); } function btnRead() { const insert = document.getElementById('content'); insert.innerHTML = createTemplate(); readTemplate(); } 

 <div id="content"></div> <button onclick="btnRead()">Click</button>