我尝试在单击按钮后添加 HTML 代码。
事情是这样的；您输入选项卡的名称，然后单击链接到 addTab 函数的按钮。然后我尝试使用 createElement()、setAttribute() 和 appendChild() 编写代码，但没有任何效果。
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);
}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;
}<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，所以我很容易迷路!
我也想知道，这是动态添加标签的最佳方式吗？
感谢您的帮助。
最佳答案
问题
你快到了，你的 js 中有 2 个问题导致它失败:
var tabbar = document.getElementsByClassName("tab");
document.tabbar.appendChild(btn);
- 您调用了变量
tabbar但在下一行尝试使用名称document.tabbar调用它，这不是一回事，这可以在浏览器中看到控制台:它告诉document.tabbar 未定义。 - 你误用了
document.getElementsByClassName，你可能认为它返回一个HTMLElement但实际上它返回一个HTMLCollection，一种具有 less buitin 方法的数组，因此您需要将元素从集合中取出。
这是这两行的更正版本:
var tabbar = document.getElementsByClassName("tab")[0];
tabbar.appendChild(btn);
在js中使用id代替class
我个人更喜欢使用 id 来获取带有 document.getElementById 的元素，因为 id 必须 是唯一的，所以一个格式良好的 HTML 总是只有一个元素具有这个 id
还有 document.getElementById 返回一个 HTMLElement 所以不需要在集合中寻找想要的元素
最后，由于使用 class 作为漏洞，如果您在当前标签之前添加另一个具有相同类别的 tag，那么您的 tabbar将成为 HTMLCollection
你还没有看到的另一个错误
btn.setAttribute("onlick", "openTab(event, ${tabname})");
应该这样写
btn.setAttribute("onlick", `openTab(event, '${tabname}')`);
使用 ` 而不是 " 来使用 template litterals 的扩展
注意:在 HTML 中定义事件被认为是不好的做法，您应该这样做:
btn.addEventListener('click', openTab)
或者你也可以使用
btn.onlick = function() { openTab(btn, tabname); } // or
btn.onlick = () => openTab(btn, tabname);
但这两种写法需要修改openTab
替换
evt.currentTarget.className += " active";
由
btn.className += " active"
修正版
最后是你的代码片段的更正版本(除了这 3 行我什么都没碰)
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);
}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;
}<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 还不够了解。
关于javascript - 如何用JS动态添加HTML？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57693027/