Speichern Sie die Seite als HTML-Datei einschließlich der neu hinzugefügten Elemente über JavaScript/jQuery

-2

Ich habe eine Webanwendung, die ein HTML-Element (wie div) mit JavaScript über appendChild() Funktion hinzufügt. Wenn ich (nach dem Hinzufügen von div) mit Firebug inspiziere, zeigt es das neu hinzugefügte Div. Aber wenn ich den Quellcode im Browser sehe, werden die Änderungen nicht berücksichtigt.Speichern Sie die Seite als HTML-Datei einschließlich der neu hinzugefügten Elemente über JavaScript/jQuery

Meine Frage ist: Wie das neu hinzugefügte div zusammen mit anderen HTML-Elementen als HTML-Datei mit JavaScript oder jQuery zu speichern?

Source Code:

<html> 
<head> 
<title>Page title</title> 
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
<script> 
$(document).ready(function() { 
    $('#btnAddtoList').click(function(){ 
    if($('#inputAddtoList').val() == '') {alert("please enter some value."); } 
    var text = $('#inputAddtoList').val(); 
    var newDiv = $('<div class="listing"><h4>' + text + '</h4></div>'); 
    $('body').append(newDiv); 
    $('#inputAddtoList').val(''); 
    }); 
}); 
</script> 
</head> 
<body> 

Enter Question: <BR/><textarea id="inputAddtoList" rows="5" cols="50" placeholder="Enter Question Here..." autofocus></textarea> 
<button id="btnAddtoList">Add Question</button> 
<BR /><BR /> 
<strong>Question :</strong> 

</body> 
</html>

Quelle

2016-07-31 Asad

Was genau meinen Sie mit HTML-Seite zu speichern? – jonju

@jonju Ich meine Automatisierung der Funktionalität ähnlich wie Datei-> Speichern (oder Speichern unter) – Asad

Der Quellcode ist, was der Server an den Browser gesendet hat, es kann nicht die Live-Änderungen widerspiegeln. Firebug hilft Ihnen, Live-DOM zu überprüfen. Mit jQuery können Sie den HTML-Code beliebiger Elemente auf Ihrer Seite einschließlich der gesamten Seite $("html").html() abrufen. Moderne Browser unterstützen das Speichern von Dateien mithilfe von HTML5 W3C saveAs() -Funktion und die FileSaver.js als polyfill:

var blob = new Blob([$("html").html()], {type: "text/html;charset=utf-8"}); 
saveAs(blob, "page.html");

Demo: https://jsfiddle.net/iRbouh/dj5j3kLd/

Quelle

2016-07-31 21:47:18

Einer von uns hat diese Frage nicht bekommen, aber jetzt müssen wir lernen, welcher? : D – jazzgot

@jazzgot Ich glaube, dass die OP-Frage ist: wie das neu hinzugefügte div zusammen mit anderen HTML-Elementen als ** HTML-Seite ** mit ** JavaScript ** oder ** jQuery ** zu speichern? Sie entscheiden: D –

Ich verstehe HTML-Seite als Seite, die Sie von jedem Browser auf dem mit dem Internet verbundenen Computer anzeigen können, und Sie verstehen es als eine Datei, die Sie lokal ausführen können. – jazzgot

Wenn Sie ein Element auf das DOM mit JavaScript hinzufügen, können Sie es nicht direkt zeigen, auf den Quellcode, weil sie dynamisch hinzugefügt wird. Aber Sie können es überprüfen (Rechtsklick auf die Seite) und zeigen, wie DOM-Element von JavaScript erstellt werden.

Quelle

2016-07-31 21:39:04

Ich weiß schon, dass. – Asad

Ich habe meine Frage aktualisiert und Code für Ihre Informationen hinzugefügt. – Asad

Eigentlich möchten Sie Ihre HTML-Datei ändern, aber ist es unmöglich, dies ohne serverseitige Programmierung zu tun. Sie können die tatsächlichen Dateien auf dem Server nicht nur mit clientseitigem JavaScript ändern.

Die einzige Möglichkeit, JavaScript zu verwenden, ist ein serverseitiges Skript, das auf Node.js ausgeführt wird und mit Ihrem clientseitigen Code kommuniziert.

Quelle

2016-07-31 21:39:34 jazzgot

Kann ich AJAX verwenden, um mein Ziel zu erreichen? – Asad

Sicher, aber Sie brauchen immer noch einige serverseitige Code, die Ihre AJAX "Nachricht" erhalten. Zum Beispiel können Sie einfaches PHP-Skript verwenden. – jazzgot

@Asad Möchten Sie diese Datei auf Ihrem Computer speichern oder Änderungen auf Ihrer Website sichtbar machen? – jazzgot

Speichern Sie die Seite als HTML-Datei einschließlich der neu hinzugefügten Elemente über JavaScript/jQuery

Antwort

Verwandte Themen