Dodaj / usuń kod HTML wewnątrz div za pomocą JavaScript

Question 1

Chcę mieć możliwość dodawania wielu wierszy do elementu div, a także ich usuwania. U góry strony mam przycisk „+”, który służy do dodawania treści. Następnie po prawej stronie każdego wiersza znajduje się przycisk „-”, który służy do usuwania tego wiersza. Po prostu nie mogę rozgryźć kodu JavaScript w tym przykładzie.

Oto moja podstawowa struktura HTML:

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

<div id="content">

</div>

Oto, co chcę dodać do elementu div zawartości:

<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

Możesz zrobić coś takiego.

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

Ku mojemu największemu zdziwieniu przedstawiam wam metodę DOM, której nigdy wcześniej nie użyłam, zanim wyszukałam w Google to pytanie i znalazłam starożytne insertAdjacentHTMLw MDN (zobacz CanIUse? InsertAdjacentHTML, aby uzyskać całkiem zieloną tabelę zgodności).

Więc używając go, napiszesz

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>

Rozwiń fragment

Question 4

Możesz użyć tej funkcji, aby dodać dziecko do elementu 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

Innym rozwiązaniem jest użycie getDocumentByIdi insertAdjacentHTML.

Kod:

function addRow() {

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

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

}

Sprawdź tutaj, aby uzyskać więcej informacji: Element.insertAdjacentHTML ()

Question 6

Aby usunąć węzeł, możesz wypróbować to rozwiązanie, które mi pomogło.

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

Question 7

utwórz klasę dla tego przycisku powiedzmy:

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

Twój js powinien wyglądać tak:

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

Question 8

spróbuj podążać za generowaniem

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

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

    }

Question 9

Dodaj kod HTML wewnątrz div za pomocą JavaScript

Składnia:

element.innerHTML += "additional HTML code"

lub

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

Usuń kod HTML wewnątrz div za pomocą 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>

Answer 1

Chcę mieć możliwość dodawania wielu wierszy do elementu div, a także ich usuwania. U góry strony mam przycisk „+”, który służy do dodawania treści. Następnie po prawej stronie każdego wiersza znajduje się przycisk „-”, który służy do usuwania tego wiersza. Po prostu nie mogę rozgryźć kodu JavaScript w tym przykładzie.

Oto moja podstawowa struktura HTML:

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

<div id="content">

</div>

Oto, co chcę dodać do elementu div zawartości:

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

Answer 2

2

Czy możesz do tej pory opublikować swój kod JavaScript?

elclanrs

Answer 3

@elclanrs Próbowałem postępować zgodnie z tym samouczkiem: dustindiaz.com/…, ale kod nie działał z moim przykładem. Przyjrzałem się również zaktualizowanej odpowiedzi, którą opublikował, ale tak naprawdę nie rozumiałem kodu, ponieważ jestem dość nowy w JavaScript.

Daniel Tovesson,

Answer 4

151

Możesz zrobić coś takiego.

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);
}

Austin Brunkhorst
źródło

Chcę mieć możliwość dodawania wielu wierszy. Moje pytanie było trochę niejasne, więc je zredagowałem.

Daniel Tovesson

1

Obsługuje wiele rzędów.

Austin Brunkhorst

1

Och, zgadza się. Właśnie popełniłem błąd podczas próbowania kodu. Już działa. Twoje zdrowie!

Daniel Tovesson

Chociaż to nie działa podczas pakowania danych wejściowych w element div, taki jak<div class="options_part"></div>

Daniel Tovesson,

2

Och, rozumiem. Trzeba wyjąć dziecko z rodzicem, więc zmiany input.parentNodedo input.parentNode.parentNodew removeRow(). Przypomnienie, że jeśli dodasz więcej rodziców do przycisków usuwania, będziesz musiał odpowiednio zmienić, removeRowtak jak właśnie to zrobiłem.

Austin Brunkhorst,

Answer 5

Chcę mieć możliwość dodawania wielu wierszy. Moje pytanie było trochę niejasne, więc je zredagowałem.

Daniel Tovesson

Answer 6

1

Obsługuje wiele rzędów.

Austin Brunkhorst

Answer 7

1

Och, zgadza się. Właśnie popełniłem błąd podczas próbowania kodu. Już działa. Twoje zdrowie!

Daniel Tovesson

Answer 8

Chociaż to nie działa podczas pakowania danych wejściowych w element div, taki jak<div class="options_part"></div>

Daniel Tovesson,

Answer 9

2

Och, rozumiem. Trzeba wyjąć dziecko z rodzicem, więc zmiany input.parentNodedo input.parentNode.parentNodew removeRow(). Przypomnienie, że jeśli dodasz więcej rodziców do przycisków usuwania, będziesz musiał odpowiednio zmienić, removeRowtak jak właśnie to zrobiłem.

Austin Brunkhorst,

Answer 10

Ku mojemu największemu zdziwieniu przedstawiam wam metodę DOM, której nigdy wcześniej nie użyłam, zanim wyszukałam w Google to pytanie i znalazłam starożytne insertAdjacentHTMLw MDN (zobacz CanIUse? InsertAdjacentHTML, aby uzyskać całkiem zieloną tabelę zgodności).

Więc używając go, napiszesz

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>

Rozwiń fragment

Answer 11

Możesz użyć tej funkcji, aby dodać dziecko do elementu 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);
}

Answer 12

Innym rozwiązaniem jest użycie getDocumentByIdi insertAdjacentHTML.

Kod:

function addRow() {

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

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

}

Sprawdź tutaj, aby uzyskać więcej informacji: Element.insertAdjacentHTML ()

Answer 13

Aby usunąć węzeł, możesz wypróbować to rozwiązanie, które mi pomogło.

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

Answer 14

1

utwórz klasę dla tego przycisku powiedzmy:

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

Twój js powinien wyglądać tak:

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

dashme
źródło

4

Nie wspomniał o jQuery.

Austin Brunkhorst,

Answer 15

4

Nie wspomniał o jQuery.

Austin Brunkhorst,

Answer 16

spróbuj podążać za generowaniem

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

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

    }

Answer 17

Dodaj kod HTML wewnątrz div za pomocą JavaScript

Składnia:

element.innerHTML += "additional HTML code"

lub

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

Usuń kod HTML wewnątrz div za pomocą JavaScript

elementChild.remove();

Answer 18

<!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>

Answer 19

Proszę wyjaśnij nieco swój kod pytającemu. :)

Lamanus

Answer 20

W tym kodzie możemy łatwo DODAĆ i USUNĄĆ określone pole tekstowe.

Aezaz Desai

Dodaj / usuń kod HTML wewnątrz div za pomocą JavaScript

Odpowiedzi: