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();
}

我的问题是，我第一次执行调用函数的按钮时未检测到“ sumd” 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>

读取在JavaScript香草中创建的元素时出现问题？

2 个答案: