文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何使用JS动态添加HTML？

问如何使用JS动态添加HTML？
EN

Stack Overflow用户
提问于 2019-08-28 12:59:35
回答 3查看 160关注 0票数 1

单击按钮后，我尝试添加HTML代码。

事情是这样的:输入选项卡的名称，然后单击链接到addTab函数的按钮。然后，我尝试使用createElement()、setAttribute()和appendChild()编写代码，但是没有任何效果。

​

代码语言：javascript
复制
function openTab(evt, tabName) {
  var i, tabcontent, tablinks;

  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  document.getElementById(tabName).style.display = "block";
  evt.currentTarget.className += " active";
}

function addTab() {
  var tabname = entree.value;
  var btn = document.createElement("BUTTON");
  btn.innerHTML = tabname;
  btn.setAttribute("class", "tablinks")
  btn.setAttribute("onlick", "openTab(event, ${tabname})");
  var tabbar = document.getElementsByClassName("tab");
  document.tabbar.appendChild(btn);

  var tabdiv = document.createElement("DIV");
  document.body.appendChild(tabdiv);
  tabdiv.setAttribute("id", tabname);
  tabdiv.setAttribute("class", "tabcontent")

  var tabp = document.createElement("P");
  var tabptxt = document.createTextNode("Réussite.");
  tabp.appendChild(tabptxt);
}
代码语言：javascript
复制
header {
  padding-bottom: 10px;
}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
代码语言：javascript
复制
<header>
  <label>Enter tab's name : </label>
  <input type="text" id="entree" minlength="4" maxlength="12" size="12">
  <button onclick="addTab()">VALIDER</button>
</header>

<body>
  <div class="tab">
    <button class="tablinks" onclick="openTab(event, '12septembre')">12septembre</button>
    <button class="tablinks" onclick="openTab(event, '7octobre')">7octobre</button>
  </div>
  <div id="12septembre" class="tabcontent">
    <h3>12 septembre</h3>
  </div>
  <div id="7octobre" class="tabcontent">
    <h3>7 octobre</h3>
  </div>
</body>

​

由于我没有使用Js进行实验，所以我很容易迷路！我还想知道，这是动态添加选项卡的最佳方法吗？

谢谢你的帮助。

javascript
html
css
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-08-28 13:18:08

问题所在

你差一点就到了，你的js有两个问题让它失败了：

代码语言：javascript
复制
var tabbar = document.getElementsByClassName("tab");
document.tabbar.appendChild(btn);
  • 您调用了变量tabbar，但是在下一行中，尝试用名称document.tabbar调用它--这不是一回事，这可以在浏览器控制台中看到:它正在告诉document.tabbar is undefined。
  • 您误用了document.getElementsByClassName，您可能认为它返回一个HTMLElement，但实际上它返回一个HTMLCollection，这是一种具有较少buitin方法的数组，因此您需要将元素从集合中提取出来。

以下是这两行代码的更正版本：

代码语言：javascript
复制
var tabbar = document.getElementsByClassName("tab")[0];
tabbar.appendChild(btn);

在js中使用ids而不是class

我个人更喜欢使用id来获取document.getElementById元素，因为id 必须是唯一的，所以一个良好的格式的总是只有一个元素与这个id。

另外，document.getElementById返回一个HTMLElement，因此不需要在集合中查找想要的元素

最后，由于使用class作为漏洞，如果在当前类之前添加具有相同类的另一个tag，则tabbar将成为HTMLCollection的第二个元素。

又一个你还没看到的错误

正如epascarello in comments所提到的

代码语言：javascript
复制
btn.setAttribute("onlick", "openTab(event, ${tabname})");

应写

代码语言：javascript
复制
btn.setAttribute("onlick", `openTab(event, '${tabname}')`);

用`代替"使用template litterals的扩展

注意:在HTML中定义事件被认为是不好的做法，您应该这样做：

代码语言：javascript
复制
btn.addEventListener('click', openTab)

或者你也可以使用

代码语言：javascript
复制
btn.onlick = function() { openTab(btn, tabname); } // or
btn.onlick = () => openTab(btn, tabname);

但是，这两种编写它的方法要求您修改openTab替换

代码语言：javascript
复制
evt.currentTarget.className += " active";

通过

代码语言：javascript
复制
btn.className += " active"

修正版

最后，修改后的片段版本(除了这3行之外，我什么也没碰)

​

代码语言：javascript
复制
function openTab(evt, tabName) {
    var i, tabcontent, tablinks;

    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
}

function addTab() {
    var tabname = entree.value;
    var btn = document.createElement("BUTTON");
    btn.innerHTML = tabname;
    btn.setAttribute("class", "tablinks")
    btn.setAttribute("onlick", `openTab(event, '${tabname}')`);
    var tabbar = document.getElementsByClassName("tab")[0];
    tabbar.appendChild(btn);

    var tabdiv = document.createElement("DIV");
    document.body.appendChild(tabdiv);
    tabdiv.setAttribute("id", tabname);
    tabdiv.setAttribute("class", "tabcontent")

    var tabp = document.createElement("P");
    var tabptxt = document.createTextNode("Réussite.");
    tabp.appendChild(tabptxt);
}
代码语言：javascript
复制
header {
    padding-bottom: 10px;
}

.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

.tab button:hover {
    background-color: #ddd;
}

.tab button.active {
    background-color: #ccc;
}

.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
代码语言：javascript
复制
<header>
    <label>Enter tab's name : </label>
    <input type="text" id="entree" minlength="4" maxlength="12" size="12">
    <button onclick="addTab()">VALIDER</button>
</header>

<body>
    <div class="tab">
        <button class="tablinks" onclick="openTab(event, '12septembre')">12septembre</button>
        <button class="tablinks" onclick="openTab(event, '7octobre')">7octobre</button>
    </div>
    <div id="12septembre" class="tabcontent">
        <h3>12 septembre</h3>
    </div>
    <div id="7octobre" class="tabcontent">
        <h3>7 octobre</h3>
    </div>
</body>

​

在您的代码中还有一些其他的内容要说，但这主要是因为您还不知道JS本机API。

票数 2
EN

Stack Overflow用户

发布于 2019-08-28 13:22:41

​

​

如上所示，您可以在浏览器控制台中添加调试器并检查

代码语言：javascript
复制
var tabbar = document.getElementsByClassName("tab");

在这里，tabbar将返回HTMLCollection，因此我们只需要从Collection中获取元素。我们可以像下面这样从集合中获取元素。

代码语言：javascript
复制
var tabbar = document.getElementsByClassName("tab");
tabbar[0].appendChild(btn);

​

代码语言：javascript
复制
function openTab(evt, tabName) {
    var i, tabcontent, tablinks;

    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    document.getElementById(tabName).style.display = "block";
    evt.currentTarget.className += " active";
}

function addTab() {
    var tabname = entree.value;
    var btn = document.createElement("BUTTON");
    btn.innerHTML = tabname;
    btn.setAttribute("class", "tablinks")
    btn.setAttribute("onlick", "openTab(event, ${tabname})");
    var tabbar = document.getElementsByClassName("tab");
    tabbar[0].appendChild(btn);

    var tabdiv = document.createElement("DIV");
    document.body.appendChild(tabdiv);
    tabdiv.setAttribute("id", tabname);
    tabdiv.setAttribute("class", "tabcontent")

    var tabp = document.createElement("P");
    var tabptxt = document.createTextNode("Réussite.");
    tabp.appendChild(tabptxt);
}
代码语言：javascript
复制
header {
    padding-bottom: 10px;
}

.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}

.tab button:hover {
    background-color: #ddd;
}

.tab button.active {
    background-color: #ccc;
}

.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
代码语言：javascript
复制
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
    <label>Enter tab's name : </label>
    <input type="text" id="entree" minlength="4" maxlength="12" size="12">
    <button onclick="addTab()">VALIDER</button>
</header>

<body>
    <div class="tab">
        <button class="tablinks" onclick="openTab(event, '12septembre')">12septembre</button>
        <button class="tablinks" onclick="openTab(event, '7octobre')">7octobre</button>
    </div>
    <div id="12septembre" class="tabcontent">
        <h3>12 septembre</h3>
    </div>
    <div id="7octobre" class="tabcontent">
        <h3>7 octobre</h3>
    </div>
</body>

​

票数 0
EN

Stack Overflow用户

发布于 2019-08-28 13:06:57

试试Jquery！例如：

代码语言：javascript
复制
this.$OuterDiv = $('<div></div>')
.hide()
.append($('<table></table>')
    .attr({ id : tabname })
    .addClass("tabcontent")
);
票数 -1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/57693027

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档