最近、私は2つのボタンBTN1、BTN2を持っています。 BTN1をクリックすると、それが消えて、BTN_AとBTN_Bの2つの新しいメッセージが表示されるか、BTN_Aが表示され、& BTN1.A、BTN1.Bが表示されます。 BTNをクリックして消滅させたい場合は、これを達成する方法。動的にHTMLをレンダリングする方法
私は "display：none"を作ることができると思ったが、何のためにhtmlを最良の方法で動的にレンダリングするのか？
ボタンのようにDOM要素を非表示にする方法は4つあります。 最初の3つはCSSスタイルの変更です：
document.getElementById('myBtn').style.opacity = '0';
document.getElementById('myBtn').style.display = "none";
document.getElementById('myBtn').style.visibility = "hidden";
要素を追加および削除するコードはこのように書き：
var div = document.getElementById('endlessBtnContainer');
div.innerHTML = div.innerHTML + '<button id="addBtn" onclick="addBtn()">addBtn</button>';
と
removeChild()必要なコードでDOMから要素を削除するには、次のです取り除く
var div = document.getElementById('addBtn');
div.parentNode.removeChild(div);
opacity: 0;は、単に要素が表示されないようにしますが、それでも正常に存在します。だから、あなたはまだボタンをクリックすることができます。visibility: hidden;要素を非表示にしますが、まだ表示されていたときと同じ領域にはまだ が表示されます。これ以上 クリックすることはできません。#btnA, #btnB, #btn1A, #btn1B{
opacity: 0;
}<script>
function hideElem()
{
\t for (var i = 0; i < arguments.length; i++) {
\t //document.getElementById(''+arguments[i]).style.opacity = '0';//just invisible, still clickable
\t //document.getElementById(''+arguments[i]).style.display = "none";//no space taken
\t document.getElementById(''+arguments[i]).style.visibility = "hidden";//invisible, not clickable
\t } \t
}
function showElem(targetElem)
{
\t for (var i = 0; i < arguments.length; i++) {
\t \t document.getElementById(''+arguments[i]).style.opacity = '1';
\t } \t
}
function addBtn()
{
\t var div = document.getElementById('endlessBtnContainer');
\t div.innerHTML = div.innerHTML + '<button id="addBtn" onclick="addBtn()">addBtn</button>';
}
function removeBtn()
{
\t var div = document.getElementById('addBtn');
\t div.parentNode.removeChild(div);
}
</script>
<button id="btn1" onclick="hideElem('btn1', 'btn2'); showElem('btnA', 'btnB');">
\t btn1
</button>
<button id="btn2">
\t btn2
</button>
<button id="btnA" onclick="hideElem('btnA', 'btnB'); showElem('btn1A', 'btn1B');">
\t btnA
</button>
<button id="btnB">
\t btnB
</button>
<button id="btn1A">
\t btn1A
</button>
<button id="btn1B">
\t btn1B
</button>
<button id="addBtn" onclick="addBtn()">
\t addBtn
</button>
<button id="removeBtn" onclick="removeBtn()">
\t removeBtn
</button>
<div id="endlessBtnContainer">
</div>
これを行う多くのライブラリ/フレームワークをtheresの。 –
私はいくつかのJSが仕事をすることができると思う。 – TheCrimulo
JavaScript DOM操作および/またはjQueryを学ぶ。 – Nhan