Question

我正在尝试使用JS进行模板化。示例用例是，我有两个对象的页面，矩形和圆形。当我点击矩形时，它应该显示带有文本DELETE RECTANGLE的html按钮。

实际上，我将调用ajax get模板文件（panel.htm）来获取此文件中的内容。然后我用JS创建div元素。然后我用panel.htm（模板）填充innerHTML。在这个模板中。

我想要的是在创建和填充的div中更改此按钮内部html。我使用getByClass，因为没有为元素定义ById。

但是按钮的更改不会传播/复制到原始div。

  
   // Template data
   var html = `<div>
                   <button class="delBtn" type="button">OLD TEXT</button> <br>
               </div>`;
     
   // creating new div.
   var div = document.createElement('div');

   // putting template to new div
   div.innerHTML = html;

   // accessing the button from the inserted template
   div.getElementsByClassName('delBtn').innerHTML = "NEW BUTTON TEXT";
   
   // There I would expect to get div with button inside with NEW TEXT
   console.log(div);

   // In production here will be some insertion to page etc. This is just bare example of code.

我知道使用一些模板框架可以解决这个问题。但是如果可能的话，我想留下来清理JS。这对我来说也是新的，所以我想学习一点点，我无法在任何地方找到答案。

在我看来，这似乎是纯粹的基本内容，所以我希望这个问题不是多余的。

Answer 1

getByClass总是返回一个HTMLCollection，所以你可能想得到第一个像

div.getElementsByClassName('delBtn')[0].innerHTML = "NEW BUTTON TEXT";

这会有效！

另外如果你想尝试一下

document.body.appendChild(div);

Answer 2

@thatOneGuy是对的，你需要选择你想要获得的课程的索引，但你的 div 变量也会显示

<div>
    <div>
        <button class="delBtn" type="button">OLD TEXT</button> <br>
    </div>
</div>

如何用JS来修改新元素的子元素，还不在页面中

2 个答案: