Die dynamische Erstellung von HTML-Elemente mit Javascript?

Können Sie ein element erstellen mit document.createElement. Nach der Erstellung können Sie Attribute hinzufügen. Wenn Sie möchten, um das element zu zeigen, bis in Ihrem Dokument haben, müssen Sie legen Sie in in den DOM-Baum des Dokuments. Versuchen Sie, um das Spiel mit diesem code:

var body = document.getElementsByTagName('body')[0],
    newdiv = document.createElement('div');   //create a div
    newdiv.id = 'newid';                      //add an id
    body.appendChild(newdiv);                 //append to the doc.body
    body.insertBefore(newdiv,body.firstChild) //OR insert it

Wenn es nur html Sie wollen, das ist ein Ansatz:

function createmyElements(id1,id2,id3){
   return [
           '<a href="some link" id="',
            id1,
           '">linktxt</a>',
           '<div id="" ',
            id2,
           '"></div>',
           '<someElement id="',
            id3,
           '"></someElement>'
          ].join('\n');
}

Noch ein anderer Ansatz erstellen Sie ein div, ohne Injektion in den DOM-Baum und die Elemente hinzufügen, dass die Verwendung von DOM-Methoden. Hier ist eine Funktion zum erstellen von 1 element

function createElementHtml(id,tagname){
  var containerdiv = document.createElement('div'),
      nwtag = document.createElement(tagname);
  nwtag.id = id;
  containerdiv.appendChild(nwtag);
  return containerdiv.innerHTML;
}
//usage
createElementHtml('id1','div'); //=> <div id="id1"></div>

InformationsquelleAutor KooiInc

Html:

<div id="main"></div>

JavaScript:

var tree = document.createDocumentFragment();
var link = document.createElement("a");
link.setAttribute("id", "id1");
link.setAttribute("href", "http://site.com");
link.appendChild(document.createTextNode("linkText"));

var div = document.createElement("div");
div.setAttribute("id", "id2");
div.appendChild(document.createTextNode("divText"));

tree.appendChild(link);
tree.appendChild(div);
document.getElementById("main").appendChild(tree);

Der Hauptgrund für die Verwendung eines documentFragment statt nur das hinzufügen der Elemente direkt ist die Geschwindigkeit der Ausführung.

In dieser Größe ist es egal, aber wenn Sie beginnen, hinzufügen von Hunderten von Elementen, schätzen Sie es tun in-memory zuerst 🙂

Mit documentFragment können Sie konstruieren einen ganzen Baum von DOM-Elementen im Speicher und wird nicht afffect die browser-DOM bis zum letzten moment.

Sonst zwingt es den browser zu aktualisieren, für jedes element, das manchmal eine echte Schmerzen zu beobachten.

InformationsquelleAutor Guidhouse