Web-Frontend
js-Tutorial
Beispielanalyse der Methode zum Hinzufügen von DOM-Knoten zum Dokument mithilfe von Javascript
Beispielanalyse der Methode zum Hinzufügen von DOM-Knoten zum Dokument mithilfe von Javascript
Dieser Artikel stellt hauptsächlich die Methode zum Hinzufügen von DOM-Knoten zu Dokumenten in JavaScript vor und vergleicht und analysiert die beiden Methoden zur Knotenerstellung in JavaScript, einschließlich verwandter Techniken des JavaScript-Knotenbetriebs und der Laufzeitberechnung. Freunde in Not können sich darauf beziehen . Die Details sind wie folgt:
Hier werden zwei Methoden verglichen: die erste: Erstellen Sie zuerst alle Knoten und fügen Sie sie dann zur Laufzeit des Dokuments hinzu Das Dokument und dann jedes hinzufügen. Die Laufzeit zum Erstellen eines Knotens und zum anschließenden Hinzufügen zum Container. Aus Testsicht ist die zweite Methode besser als die erste!
Der Betriebseffekt ist in der folgenden Abbildung dargestellt:
Der spezifische Code lautet wie folgt:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>将DOM节点添加到文档实例</title>
</head>
<script type="text/javascript">
//第一种：先创建所有节点，再添加到文档
function createAdd(count)
{
var start=new Date();
var container=document.createElement("p");
var obj=document.getElementById("main");
for(var i=0;i<count;i++)
{
var node=document.createElement("p");
node.style.position="absolute";
node.style.left=(6+parseInt(Math.random()*100))+"px";
node.style.top=(6+parseInt(Math.random()*100))+"px";
container.appendChild(node);
}
obj.appendChild(container);
var end=new Date();
var duration=end-start;
alert("第一种方式："+duration+"ms");
}
//第二种：先添加到文档一个空容器，再创建所有接点，并分别添加到容器中
function addCreate(count)
{
var start=new Date();
var container=document.createElement("p");
var obj=document.getElementById("main");
obj.appendChild(container);
for(var i=0;i<count;i++)
{
var node=document.createElement("p");
node.style.position="absolute";
node.style.left=(6+parseInt(Math.random()*100))+"px";
node.style.top=(6+parseInt(Math.random()*100))+"px";
container.appendChild(node);
}
var end=new Date();
var duration=end-start;
alert("第二种方式："+duration+"ms");
}
//检测输入的数据是否正确
function checkData()
{
var number=parseInt(document.getElementById("count").value);
return number;
}
//调用createAdd()函数
function callCreateAdd()
{
var count=checkData();
createAdd(count);
}
//调用addCreate()函数
function callAddCreate()
{
var count=checkData();
addCreate(count);
}
</script>
<body>
<h3>将DOM节点添加到文档实例</h3>
<hr style="border:1px solid #000000;" />
请输入一个整数：
<input type="text" id="count" name="count" />
<br />
<input type="button" id="createadd" name="createadd" value="第一种：先创建所有节点，再添加到文档方式的运行时长" onClick="callCreateAdd();" />
<input type="button" id="one" name="one" value="第二种：先向文档添加一个空容器，然后每创建一个节点，再添加到容器中方式的运行时长" onClick="callAddCreate();" />
<br />
<p id="main" style="position:absolute;"></p>
</body>
</html>Das Obige ist Den gesamten Inhalt dieses Kapitels und weitere verwandte Tutorials finden Sie unter JavaScript-Video-Tutorial!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
So fügen Sie einen Fernseher zu Mijia hinzu
Mar 25, 2024 pm 05:00 PM
Viele Benutzer bevorzugen im modernen Leben zunehmend das elektronische Ökosystem der Xiaomi-Smart-Home-Vernetzung. Nach der Verbindung mit der Mijia-APP können Sie die angeschlossenen Geräte problemlos mit Ihrem Mobiltelefon steuern. Viele Benutzer wissen jedoch immer noch nicht, wie sie Xiaomi hinzufügen können Wenn Sie die App zu Hause verwenden, erfahren Sie in diesem Tutorial die spezifischen Verbindungsmethoden und -schritte, in der Hoffnung, allen Bedürftigen zu helfen. 1. Nachdem Sie die Xiaomi-App heruntergeladen haben, erstellen Sie ein Xiaomi-Konto oder melden Sie sich an. 2. Methode zum Hinzufügen: Nachdem das neue Gerät eingeschaltet ist, bringen Sie das Telefon in die Nähe des Geräts und schalten Sie den Xiaomi-Fernseher ein. Unter normalen Umständen wird eine Verbindungsaufforderung angezeigt. Wählen Sie „OK“, um den Geräteverbindungsvorgang zu starten. Wenn keine Aufforderung erscheint, können Sie das Gerät auch manuell hinzufügen. Die Methode ist: Klicken Sie nach dem Aufrufen der Smart Home-App auf die 1. Schaltfläche unten links
Tutorial zum Hinzufügen einer neuen Festplatte in Win11
Jan 05, 2024 am 09:39 AM
Wenn wir einen Computer kaufen, entscheiden wir uns möglicherweise nicht unbedingt für eine große Festplatte. Wenn wir zu diesem Zeitpunkt eine neue Festplatte zu win11 hinzufügen möchten, können wir zuerst die neue Festplatte installieren, die wir gekauft haben, und dann Partitionen zum Computer hinzufügen. Anleitung zum Hinzufügen einer neuen Festplatte in Win11: 1. Zuerst zerlegen wir den Host und finden den Steckplatz der Festplatte. 2. Nachdem wir es gefunden haben, schließen wir zunächst das „Datenkabel“ an, das normalerweise eine narrensichere Konstruktion hat. Wenn es nicht eingeführt werden kann, kehren Sie einfach die Richtung um. 3. Anschließend stecken Sie die neue Festplatte in den Festplattenschacht. 4. Verbinden Sie nach dem Einstecken das andere Ende des Datenkabels mit der Hauptplatine des Computers. 5. Nachdem die Installation abgeschlossen ist, können Sie es wieder in den Host einsetzen und einschalten. 6. Nach dem Booten klicken wir mit der rechten Maustaste auf „Dieser Computer“ und öffnen „Computerverwaltung“. 7. Klicken Sie nach dem Öffnen in der unteren linken Ecke auf „Datenträgerverwaltung“. 8. Dann können Sie rechts klicken
So implementieren Sie ein Online-Spracherkennungssystem mit WebSocket und JavaScript
Dec 17, 2023 pm 02:54 PM
So implementieren Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem. Einführung: Mit der kontinuierlichen Weiterentwicklung der Technologie ist die Spracherkennungstechnologie zu einem wichtigen Bestandteil des Bereichs der künstlichen Intelligenz geworden. Das auf WebSocket und JavaScript basierende Online-Spracherkennungssystem zeichnet sich durch geringe Latenz, Echtzeit und plattformübergreifende Eigenschaften aus und hat sich zu einer weit verbreiteten Lösung entwickelt. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Spracherkennungssystem implementieren.
Tutorial zum schnellen Erstellen von Desktop-Verknüpfungen in Win11
Dec 27, 2023 pm 04:29 PM
In Win11 können wir Software oder Dateien schnell auf dem Desktop starten, indem wir Desktop-Verknüpfungen hinzufügen, und wir müssen zum Betrieb nur mit der rechten Maustaste auf die erforderlichen Dateien klicken. Fügen Sie in Win11 eine Desktop-Verknüpfung hinzu: 1. Öffnen Sie „Dieser PC“ und suchen Sie die Datei oder Software, zu der Sie eine Desktop-Verknüpfung hinzufügen möchten. 2. Nachdem Sie es gefunden haben, klicken Sie mit der rechten Maustaste, um es auszuwählen, und klicken Sie auf „Weitere Optionen anzeigen“. 3. Wählen Sie dann „Senden an“ – „Desktop-Verknüpfung“. 4. Nachdem der Vorgang abgeschlossen ist, finden Sie die Verknüpfung auf dem Desktop.
WebSocket und JavaScript: Schlüsseltechnologien zur Implementierung von Echtzeitüberwachungssystemen
Dec 17, 2023 pm 05:30 PM
WebSocket und JavaScript: Schlüsseltechnologien zur Realisierung von Echtzeit-Überwachungssystemen Einführung: Mit der rasanten Entwicklung der Internet-Technologie wurden Echtzeit-Überwachungssysteme in verschiedenen Bereichen weit verbreitet eingesetzt. Eine der Schlüsseltechnologien zur Erzielung einer Echtzeitüberwachung ist die Kombination von WebSocket und JavaScript. In diesem Artikel wird die Anwendung von WebSocket und JavaScript in Echtzeitüberwachungssystemen vorgestellt, Codebeispiele gegeben und deren Implementierungsprinzipien ausführlich erläutert. 1. WebSocket-Technologie
So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript
Dec 17, 2023 am 09:39 AM
So implementieren Sie ein Online-Reservierungssystem mit WebSocket und JavaScript. Im heutigen digitalen Zeitalter müssen immer mehr Unternehmen und Dienste Online-Reservierungsfunktionen bereitstellen. Es ist von entscheidender Bedeutung, ein effizientes Online-Reservierungssystem in Echtzeit zu implementieren. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein Online-Reservierungssystem implementieren, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist WebSocket? WebSocket ist eine Vollduplex-Methode für eine einzelne TCP-Verbindung.
Mar 18, 2024 pm 12:10 PM
Die Chrome-Erweiterung von Tampermonkey ist ein Plug-in zur Benutzerskriptverwaltung, das die Benutzereffizienz und das Surferlebnis durch Skripte verbessert. Wie fügt Tampermonkey neue Skripte hinzu? Wie lösche ich das Skript? Lassen Sie sich vom Editor unten die Antwort geben! So fügen Sie ein neues Skript zu Tampermonkey hinzu: 1. Öffnen Sie die GreasyFork-Webseite und geben Sie das Skript ein, dem Sie folgen möchten. 2. Wählen Sie ein Skript aus. Nachdem Sie die Skriptseite aufgerufen haben, wird die Schaltfläche zum Installieren dieses Skripts angezeigt. 3. Klicken Sie auf „Dieses Skript installieren“, um zur Installationsoberfläche zu gelangen. Klicken Sie einfach hier, um zu installieren. 4. Wir können die installierte Datei mit einem Klick im Installationsskript sehen.
Wie verbinde ich mich mit dem Polygon-Netzwerk in der MetaMask-Wallet? Tutorial-Anleitung zum Verbinden der MetaMask-Wallet mit dem Polygon-Netzwerk
Jan 19, 2024 pm 04:36 PM
So fügen Sie ein PolygonMainnet-Netzwerk hinzu. Um MATIC (Polygon) mit Metamask zu verwenden, müssen Sie ein privates Netzwerk namens „PolygonMainnet“ hinzufügen. Die Übertragung mit der falschen Netzwerkadresse kann zu Problemen führen. Stellen Sie daher sicher, dass Sie das Netzwerk „PolygonMainnet“ verwenden, bevor Sie von $MATIC übertragen. Das Metamask-Wallet ist standardmäßig mit dem Ethereum-Mainnet verbunden, aber wir können einfach „PolygonMainnet“ hinzufügen und $MATIC verwenden. Nur ein paar einfache Schritte zum Kopieren und Einfügen, und schon sind Sie fertig. Klicken Sie zunächst im Metamask-Wallet auf die Netzwerkoption in der oberen rechten Ecke und wählen Sie „C
