जावास्क्रिप्ट का उपयोग करके div के अंदर HTML जोड़ें / निकालें

Question

मैं एक div में कई पंक्तियों को जोड़ने और उन्हें हटाने में सक्षम होना चाहता हूं। मेरे पास पृष्ठ के शीर्ष पर एक '+' बटन है जो सामग्री जोड़ने के लिए है। फिर हर पंक्ति के दाईं ओर एक '-' बटन है जो उस बहुत ही पंक्ति को हटाने के लिए है। मैं अभी इस उदाहरण में जावास्क्रिप्ट कोड का पता नहीं लगा सकता।

यह मेरी मूल 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()">

Comments

क्या आप अपना जावास्क्रिप्ट कोड अब तक पोस्ट कर सकते हैं?

— एलक्लेनर्स

@elclanrs मैंने इस ट्यूटोरियल का अनुसरण करने की कोशिश की: dustindiaz.com/ ... लेकिन मेरे उदाहरण के साथ काम करने के लिए कोड नहीं मिला। मैंने उनके द्वारा पोस्ट किए गए अपडेटेड उत्तर पर भी ध्यान दिया लेकिन मुझे वास्तव में कोड समझ में नहीं आया क्योंकि मैं जावास्क्रिप्ट के लिए काफी नया हूं।

— डैनियल टॉवेसन

Answer 1

आप ऐसा कुछ कर सकते हैं।

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

Comments

मैं कई पंक्तियों को जोड़ने में सक्षम होना चाहता हूं। मेरा प्रश्न थोड़ा अस्पष्ट था इसलिए मैंने इसे संपादित किया।

— डैनियल टॉवेसन

यह कई पंक्तियों का समर्थन करता है।

— ऑस्टिन ब्रंकहॉर्स्ट

ओह ये सही हैं। बस आपके कोड को आज़माने में त्रुटि हुई। अब यह काम कर रहा है। चीयर्स!

— डैनियल टॉवेसन

हालाँकि, यह इनपुट में लपेटते समय काम नहीं कर रहा है जैसे<div class="options_part"></div>

— डैनियल टॉवेसन

ओह हो गया। तुम बहुत परिवर्तन माता पिता से एक बच्चे को दूर करने के लिए, है input.parentNodeकरने के लिए input.parentNode.parentNodeमें removeRow()। एक रिमाइंडर है कि यदि आप हटाने के बटन में किसी और माता-पिता को जोड़ते हैं तो आपको removeRowउसी तरह बदलना होगा जैसे मैंने अभी किया था।

— ऑस्टिन ब्रुंकहर्स्ट

Answer 2

मेरी सबसे बड़ी हैरानी की बात है कि मैंने आपके सामने एक DOM विधि प्रस्तुत की है जिसका उपयोग मैंने इस प्रश्न को देखने से पहले कभी नहीं किया है और MDNinsertAdjacentHTML पर प्राचीन खोज ( एक सुंदर हरे रंग की संगतता तालिका के लिए CanIUse सम्मिलित करें। AdjacentHTML )।

तो इसका उपयोग करते हुए आप लिखेंगे

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>

Answer 3

आप इस फ़ंक्शन का उपयोग किसी बच्चे को 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 4

एक और उपाय उपयोग करना है getDocumentByIdऔर insertAdjacentHTML।

कोड:

function addRow() {

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

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

}

अधिक जानकारी के लिए यहां देखें: Element.insertAdjacentHTML ()

Answer 5

नोड को हटाने के लिए आप इस समाधान की कोशिश कर सकते हैं इससे मुझे मदद मिली।

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

Answer 6

उस बटन के लिए एक कक्षा बनाएं जो यह कहता है:

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

आपके जेएस को इस तरह दिखना चाहिए:

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

Comments

उन्होंने jQuery का उल्लेख नहीं किया।

— ऑस्टिन ब्रंकहॉर्स्ट

Answer 7

उत्पन्न करने के लिए कृपया प्रयास करें

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

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

    }

Answer 8

जावास्क्रिप्ट का उपयोग करके div के अंदर HTML जोड़ें

वाक्य - विन्यास:

element.innerHTML += "additional HTML code"

या

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

जावास्क्रिप्ट का उपयोग करके div के अंदर HTML निकालें

elementChild.remove();

Answer 9

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

Comments

कृपया अपने कोड को प्रश्नकर्ता के लिए थोड़ा स्पष्ट करें। :)

— लैमनस

इस कोड में हम आसानी से ADD और REMOVE विशिष्ट टेक्स्टबॉक्स को देख सकते हैं।

— ऐज़ाज़ देसाई