web-dev-qa-db-ja.com

JavaScriptを使用してdiv内のHTMLを追加/削除

Divに複数の行を追加し、それらを削除できるようにしたいと思います。ページの上部にコンテンツを追加するための「+」ボタンがあります。次に、すべての行の右側に、その行を削除するための「-」ボタンがあります。この例では、javascriptコードがわかりません。

これは私の基本的なHTML構造です：

<input type="button" value="+" onclick="addRow()">

<div id="content">

</div>

これは、コンテンツdiv内に追加したいものです

<input type="text" name="name" value="" />
<input type="text" name="value" value="" />
<label><input type="checkbox" name="check" value="1" />Checked?</label>
<input type="button" value="-" onclick="removeRow()">
javascripthtmlinnerhtml
58
Daniel Tovesson

このようなことができます。

function addRow() {
    var div = document.createElement('div');

    div.className = 'row';

    div.innerHTML =
        '<input type="text" name="name" value="" />\
        <input type="text" name="value" value="" />\
        <label> <input type="checkbox" name="check" value="1" /> Checked? </label>\
        <input type="button" value="-" onclick="removeRow(this)">';

    document.getElementById('content').appendChild(div);
}

function removeRow(input) {
    document.getElementById('content').removeChild(input.parentNode);
}
114
Austin Brunkhorst

ノードを削除するには、この解決策を試してみてください。

var rslt = (nodee=document.getElementById(id)).parentNode.removeChild(nodee);
3
user2503896

この関数を使用して、DOM要素に子を追加できます。

function addElement(parentId, elementTag, elementId, html) 

 {


// Adds an element to the document


    var p = document.getElementById(parentId);
    var newElement = document.createElement(elementTag);
    newElement.setAttribute('id', elementId);
    newElement.innerHTML = html;
    p.appendChild(newElement);
}



function removeElement(elementId) 

{

    // Removes an element from the document
    var element = document.getElementById(elementId);
    element.parentNode.removeChild(element);
}
3
Arun

最も驚いたことに、この質問をgoogelし、 MDN で古代のinsertAdjacentHTMLを見つけるまで使用したことのないDOMメソッドを紹介します（ CanIUse？insertAdjacentHTML を参照してくださいかなり緑色の互換性表）。

それを使用して、あなたは書くだろう

function addRow () {
  document.querySelector('#content').insertAdjacentHTML(
    'afterbegin',
    `<div class="row">
      <input type="text" name="name" value="" />
      <input type="text" name="value" value="" />
      <label><input type="checkbox" name="check" value="1" />Checked?</label>
      <input type="button" value="-" onclick="removeRow(this)">
    </div>`      
  )
}

function removeRow (input) {
  input.parentNode.remove()
}
<input type="button" value="+" onclick="addRow()">

<div id="content">
</div>
2
Hoffmann

以下を生成してみてください

 function addRow()
    {
        var e1 = document.createElement("input");
        e1.type = "text";
        e1.name = "name1";

        var cont = document.getElementById("content")
        cont.appendChild(e1);

    }
1
Aarif Qureshi

そのボタンのクラスを作成します：

`<input type="button" value="+" class="b1" onclick="addRow()">`

あなたのjsは次のようになります：

$(document).ready(function(){
  $('.b1').click(function(){
      $('div').append('<input type="text"..etc ');
  });
});
0
dashme