Fügen Sie HTML-Elemente dynamisch mit JavaScript innerhalb von DIV mit spezifischer ID hinzu
Ok, Leute, ich brauche Eure Hilfe. Ich habe festgestellt, dass einige der code hier auf Stackoverflow (kann nicht finden, link), die HTML-code dynamisch per JS. Hier ist der code:
function create(htmlStr) {
var frag = document.createDocumentFragment(),
temp = document.createElement('div');
temp.innerHTML = htmlStr;
while (temp.firstChild) {
frag.appendChild(temp.firstChild);
}
return frag;
}
var fragment = create('<div class="someclass"><a href="www.example.com"><p>some text</p></a></div>');
document.body.insertBefore(fragment, document.body.childNodes[0]);
Dieser code funktioniert einfach gut! Aber generierter code, mit dem Wortlaut auf der Seite oben, rechts, unten body
tag. Mein Wunsch ist, zu erzeugen, die den code im leeren div
mit bestimmten id="generate-here"
.
So ausgegeben werden:
<div id="generate-here">
<!-- Here is generated content -->
</div>
Ich weiß, dass ich nicht sehen kann generated content mit "view source". Ich brauche nur zu generieren, dass die Inhalte nur in diesem besonderen Ort mit #generate-here
. Ich bin Javascript-noob, also wenn jemand können, einfach neu anordnen, dass dieser code perfekt sein wird. Vielen Dank!
P. S. ich wissen, wie man dies mit Jquery, aber ich brauche nativen und reinen JavaScript in diesem Fall.
InformationsquelleAutor der Frage Miljan Puzović | 2012-08-04
Du musst angemeldet sein, um einen Kommentar abzugeben.
Alles, was Sie tun müssen, ist, ändern Sie die Letzte Zeile. Dies wird fügen Sie das erstellte element ist, wie die letzten Kind des div:
Dadurch wird das element erstellt, da die ersten Kind des div:
Können Sie auch mit innerHTML zu ersetzen Sie einfach alles, was mit new text (wie Sie in Ihrem
create
- Funktion). Offensichtlich ist dies nicht verlangen, dass Sie halten diecreate
- Funktion, da müssen Sie eine html-Zeichenkette statt einer DOM-Objekt.InformationsquelleAutor der Antwort Gordon Gustafson
Schritt 1. Zunächst erstellen wir eine Funktion geben uns eine geordnete HTML listview. Hinweis: wir übergeben ein array von Daten:
Schritt 2. Dann lassen Sie uns zeigen unsere listview in dein div:
InformationsquelleAutor der Antwort Oclemy