Thêm / xóa HTML bên trong div bằng JavaScript

Question 1

Tôi muốn có thể thêm nhiều hàng vào một div và cũng có thể xóa chúng. Tôi có nút '+' ở đầu trang để thêm nội dung. Sau đó, ở bên phải của mỗi hàng có một nút '-' để xóa chính hàng đó. Tôi chỉ không thể tìm ra mã javascript trong ví dụ này.

Đây là cấu trúc HTML cơ bản của tôi:

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

<div id="content">

</div>

Đây là những gì tôi muốn thêm vào bên trong div nội dung:

<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()">

Question 2

Bạn có thể làm một cái gì đó như thế này.

function addRow() {
  const 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);
}

Question 3

Trước sự ngạc nhiên lớn nhất của tôi, tôi giới thiệu với bạn một phương pháp DOM mà tôi chưa từng sử dụng trước khi googeling câu hỏi này và tìm thấy cổ xưa insertAdjacentHTMLtrên MDN (xem CanIUse? InsertAdjacentHTML để biết bảng tương thích màu xanh lá cây khá đẹp).

Vì vậy, sử dụng nó bạn sẽ viết

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>

Mở rộng đoạn mã

Question 4

Bạn có thể sử dụng hàm này để thêm phần tử con vào phần tử 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);
}

Question 5

Một giải pháp khác là sử dụng getDocumentByIdvà insertAdjacentHTML.

Mã:

function addRow() {

 const  div = document.getElementById('content');

 div.insertAdjacentHTML('afterbegin', 'PUT_HTML_HERE');

}

Kiểm tra tại đây, để biết thêm chi tiết: Element.insertAdjacentHTML ()

Question 6

Để loại bỏ nút, bạn có thể thử giải pháp này, nó đã giúp tôi.

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

Question 7

tạo một lớp cho nút đó, hãy nói:

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

js của bạn sẽ trông như thế này:

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

Question 8

hãy thử làm theo để tạo

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

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

    }

Question 9

Thêm HTML bên trong div bằng JavaScript

Cú pháp:

element.innerHTML += "additional HTML code"

hoặc là

element.innerHTML = element.innerHTML + "additional HTML code"

Xóa HTML bên trong div bằng JavaScript

elementChild.remove();

Question 10

<!DOCTYPE html>
<html>
<head>
    <title>Dynamical Add/Remove Text Box</title>
    <script language="javascript">

        localStorage.i = Number(1);

        function myevent(action)
        {
            var i = Number(localStorage.i);
            var div = document.createElement('div');

            if(action.id == "add")
            {
                localStorage.i = Number(localStorage.i) + Number(1);
                var id = i;
                div.id = id;
                div.innerHTML = 'TextBox_'+id+': <input type="text" name="tbox_'+id+'"/>' + ' <input type="button" id='+id+' onclick="myevent(this)" value="Delete" />';

                document.getElementById('AddDel').appendChild(div);
            }
            else
            {
                var element = document.getElementById(action.id);
                element.parentNode.removeChild(element);
            }
        }
    </script>
</head>
<body>
    <fieldset>
    <legend>Dynamical Add / Remove Text Box</legend>
    <form>
        <div id="AddDel">
            Default TextBox:
            <input type="text" name="default_tb">
            <input type="button" id="add" onclick="myevent(this)" value="Add" />
        </div>
            <input type="button" type="submit" value="Submit Data" />
    </form>
    </fieldset>
</body>
</html>