Hoe voeg je gegevens toe aan div met JavaScript?

Ik gebruik AJAX om gegevens toe te voegen aan het div-element, waarbij ik de div vanuit JavaScript vul. Hoe kan ik nieuwe gegevens aan de div toevoegen zonder de eerdere gegevens in div te verliezen?

Antwoord 1, autoriteit 100%

Probeer dit:

var div = document.getElementById('divID');
div.innerHTML += 'Extra stuff';

Antwoord 2, autoriteit 57%

AppendChild gebruiken:

var theDiv = document.getElementById("<ID_OF_THE_DIV>");
var content = document.createTextNode("<YOUR_CONTENT>");
theDiv.appendChild(content);

InnerHTML gebruiken:
Deze aanpak verwijdert alle luisteraars naar de bestaande elementen zoals vermeld door @BiAiB. Wees dus voorzichtig als u van plan bent deze versie te gebruiken.

var theDiv = document.getElementById("<ID_OF_THE_DIV>");
theDiv.innerHTML += "<YOUR_CONTENT>"; 

Antwoord 3, autoriteit 21%

Pas op voor innerHTML, je verliestiets als je het gebruikt:

theDiv.innerHTML += 'content';

Is gelijk aan:

theDiv.innerHTML = theDiv.innerHTML + 'content';

Dat zal alle nodes in je divvernietigen en nieuwe maken. Alle verwijzingen naar en luisteraars naar elementen erin gaan verloren.

Als u ze wilt behouden (wanneer u bijvoorbeeld een klikhandler hebt toegevoegd), moet u de nieuwe inhoud toevoegen met de DOM-functies (appendChild,insertAfter,insertBefore):

var newNode = document.createElement('div');
newNode.innerHTML = data;
theDiv.appendChild(newNode);

Antwoord 4, autoriteit 10%

Als je het snelwilt doen en geen referenties en luisteraars wilt verliezen, gebruik dan: .insertAdjacentHTML();

“Het repareert het element nietwaarop het wordt gebruikt en dus het beschadigt de bestaande elementen nietbinnen het element. Dit, en het vermijden van de extra stap van serialisatie maakt het veel snellerdan directe manipulatie van innerlijke HTML.”

Ondersteund op alle hoofdbrowsers (IE6+, FF8+, All Others en Mobile): http://caniuse.com/#feat=insertadjacenthtml

Voorbeeld van https://developer.mozilla.org/en-US/docs /Web/API/Element/insertAdjacentHTML

// <div id="one">one</div>
var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');
// At this point, the new structure is:
// <div id="one">one</div><div id="two">two</div>

Antwoord 5, autoriteit 3%

Als u jQuery gebruikt, kunt u $('#mydiv').append('html content')gebruiken en de bestaande inhoud behouden.

http://api.jquery.com/append/

Antwoord 6

IE9+ (Vista+)-oplossing, zonder nieuwe tekstknooppunten te maken:

var div = document.getElementById("divID");
div.textContent += data + " ";

Dit werkte echter niet helemaal voor mij, omdat ik na elk bericht een nieuwe regel nodig had, dus mijn DIV veranderde in een gestileerde UL met deze code:

var li = document.createElement("li");
var text = document.createTextNode(data);
li.appendChild(text);
ul.appendChild(li);

Van https://developer.mozilla.org/ nl-NL/docs/Web/API/Node/textContent:

Verschillen met innerHTML

innerHTML retourneert de HTML zoals de naam aangeeft. Heel vaak gebruiken mensen innerHTML om tekst binnen een element op te halen of te schrijven. textContent moet in plaats daarvan worden gebruikt. Omdat de tekst niet als HTML wordt geparseerd, presteert deze waarschijnlijk beter. Bovendien wordt hiermee een XSS-aanvalsvector vermeden.

Antwoord 7

Zelfs dit werkt:

var div = document.getElementById('divID');
div.innerHTML += 'Text to append';

Antwoord 8

je kunt jQuery gebruiken. die het heel eenvoudig maken.

download gewoon het jQuery-bestand voeg jQuery toe aan uw HTML
of u kunt de online link gebruiken:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

en probeer dit:

$("#divID").append(data);

Antwoord 9

De volgende methode is minder algemeen dan andere, maar het is geweldig als u zeker weet dat uw laatste onderliggende knooppunt van de div al een tekstknooppunt is. Op deze manier maakt u geen nieuw tekstknooppunt met appendDataMDN Reference AppendData

let mydiv = document.getElementById("divId");
let lastChild = mydiv.lastChild;
if(lastChild && lastChild.nodeType === Node.TEXT_NODE ) //test if there is at least a node and the last is a text node
   lastChild.appendData("YOUR TEXT CONTENT");

Antwoord 10

java-script

document.getElementById("divID").html("this text will be added to div");

jquery

$("#divID").html("this text will be added to div");

Gebruik .html()zonder argumenten om te zien dat je hebt ingevoerd.
U kunt de browserconsole gebruiken om deze functies snel te testen voordat u ze in uw code gebruikt.

Antwoord 11

Waarom niet gewoon setAttribute gebruiken?

thisDiv.setAttribute('attrName','data you wish to append');

Dan kunt u deze gegevens verkrijgen door:

thisDiv.attrName;