Hinzufügen / Entfernen von HTML in div mithilfe von JavaScript

Question 1

Ich möchte in der Lage sein, einem div mehrere Zeilen hinzuzufügen und sie auch zu entfernen. Ich habe oben auf der Seite ein "+", mit dem Sie Inhalte hinzufügen können. Dann gibt es rechts von jeder Zeile eine '-' Schaltfläche, mit der genau diese Zeile entfernt werden kann. Ich kann den Javascript-Code in diesem Beispiel einfach nicht herausfinden.

Dies ist meine grundlegende HTML-Struktur:

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

<div id="content">

</div>

Folgendes möchte ich im Inhaltsbereich hinzufügen:

<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

Sie können so etwas tun.

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

Zu meiner größten Überraschung präsentiere ich Ihnen eine DOM-Methode, die ich noch nie zuvor verwendet habe, um diese Frage zu googeln und insertAdjacentHTMLauf MDN uralt zu finden (eine ziemlich grüne Kompatibilitätstabelle finden Sie unter CanIUse? InsertAdjacentHTML ).

Wenn Sie es also verwenden, würden Sie schreiben

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>

Erweitern Sie das Snippet

Question 4

Mit dieser Funktion können Sie einem DOM-Element ein untergeordnetes Element hinzufügen.

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

Eine andere Lösung ist die Verwendung von getDocumentByIdund insertAdjacentHTML.

Code:

function addRow() {

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

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

}

Weitere Informationen finden Sie hier: Element.insertAdjacentHTML ()

Question 6

Um Knoten zu entfernen, können Sie diese Lösung ausprobieren, die mir geholfen hat.

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

Question 7

Erstellen Sie eine Klasse für diese Schaltfläche. Sagen wir:

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

Ihr js sollte so aussehen:

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

Question 8

Bitte versuchen Sie Folgendes zu generieren

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

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

    }

Question 9

Fügen Sie HTML in div mit JavaScript hinzu

Syntax:

element.innerHTML += "additional HTML code"

oder

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

Entfernen Sie HTML in div mit 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>