0
votes

Comment remplacer tout le contenu HTML complet avec JavaScript?

J'ai essayé d'utiliser $ ("html"). HTML (this.responseText); code>. Qui remplace le contenu, mais il ne remplace pas les étiquettes de la tête et du corps.

Ainsi, par exemple, si je veux remplacer ce contenu: p> xxx pré>

puis je vérifie ma structure HTML dans Inspecteur, et le résultat ceci: p> xxx pré>

et il fit mal mon CSS. J'ai essayé sans scripts et ça a bien fonctionné. Quelle est la solution pour ce problème? P>

J'ai également essayé avec une approche JavaScript P> xxx pré>

mais cela confond mes javascripts. Je reçois une erreur de syntaxe de redéclaration. P>

Mon code réel où je veux implémenter: P>

<script>
  
        var frm = $('#frm');
        var submitActors = frm.find('input[type=submit]');
        var submitActor = null;
        submitActors.click(function(event) {
                submitActor = this;  
        });
        
        frm.unbind('submit').submit(function () {
           
            var formAction = document.getElementById("frm").getAttribute('action'); // Get the form action.
            var data = "";
            var pageUrl = "";
            var test_uuid = "";
            var test_number = "";
            var qid = JSON.parse(sessionStorage.getItem('userChoice')).qid;
            
            
            
            if(submitActor.name == "cmdSave"){
                data = {
                    "cmdSave" : $("#cmdSave").val(),
                    "Answer": document.querySelector('input[name="Answer"]:checked').value,
                    "csrfmiddlewaretoken": document.querySelector('input[name=csrfmiddlewaretoken').value,
                    "qid": qid
                }
            }
            else if(submitActor.name == "cmdNext"){
                data = {
                    
                    "cmdNext": document.querySelector('#cmdNext').value,
                    "csrfmiddlewaretoken":document.querySelector('input[name=csrfmiddlewaretoken').value,
                    "qid": qid
                }
            }
            var httpRequest = new XMLHttpRequest();
            var formData = new FormData();
            
            
            
            Object.keys(data).forEach(function(key) {
                console.log(key, data[key]);
                formData.append(key, data[key]);
            });
                console.log(formData)
            httpRequest.onreadystatechange = function(){
                if ( this.readyState == 4 && this.status == 200 ) {
                var response = this.responseText;
                    console.log(this.responseText) // Display the result inside result element.

                    // 1.Option
                    {% comment %} document.open();
                    document.write(this.responseText);
                    document.close(); {% endcomment %}
                    
                    // 2.Option
                    
                    {% comment %} document.documentElement.innerHTML = this.responseText;  {% endcomment %}
                    
            
                    // 3.Option
                    $(document).ready(function(){
                        $("html").html(response);
                    });
                                                                             
                
                    test_number = document.getElementById("lblNrCrt").textContent;  
                    test_uuid = "{{test.uuid}}";
                    pageUrl = "/intro/" + test_uuid + "/" + test_number + "/";
                    window.history.pushState('', '', pageUrl);
                }
            };

            httpRequest.open("post", formAction);
            httpRequest.send(formData);

            return false;
        
        });

</script>


3 commentaires

Si je fais document.QuerySelector ('html'). Innertext = 'yolo' il remplace tout. Je ne suis pas sûr de ce que JQuery fait, mais cela fera ce dont vous avez besoin


Quel navigateur est-ce? $ ("HTML"). HTML ("Somme texte") Efface tout pour moi dans Firefox. En outre, êtes-vous sûr que le this.responseText ne contient pas ces tags?


Le responsable contient ces tags, j'ai vérifié. J'utilise Firefox


5 Réponses :


1
votes

JS: strong> Avec innerhtml code>, vous pouvez remplacer toute la teneur en HTML de l'élément.

$( document ).ready(function() {
  $('html').html('...');
});


0 commentaires

4
votes

Comme je l'ai signalé, cela peut être fait

document.querySelector('html').innerHTML = '<div>yolo</div>';


3 commentaires

Tout comme une alternative, vous pouvez attraper le corps et aller à son parent document.body.parentElement . Ne vous donne probablement pas vraiment d'avantage ici le faire de cette façon, mais j'ai découvert très parfois que trouver l'enfant et que je vais au parent est plus utile que d'essayer de trouver le parent.


Cela n'a pas fonctionné si je poste deux fois, la deuxième fois que mon JavaScript ne fonctionne pas.


@ Arnold96 Voici un exemple de travail: Stackblitz.com/edit/typeScript-3wubgf



0
votes

Rechercher Tag Contenu dans votre chaîne: Fonction GetByTag (TagName, HTMLVAL) { var taghtmvalue = $ (htmlval) .find (TagName) .html (); retour taghtmvalue; }

Remplacez la teneur en tête et au corps avec le corps et la tête dans votre réponse:

$ ("tête"). HTML (GetByTag ("Head", cela.ResponseTex)); $ ("corps"). HTML (GetByTag ("Corps", cela.Responsonetex));


0 commentaires

0
votes

J'ai testé ci-dessous fonctionne fonctionne! ...

p>

<html>
<head><title>hello</title></head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
<h1>hello</h1>
<button class="action">Change HTML</button>
</body>
</html>


2 commentaires

J'ai essayé cette solution et le $ (document) .Ready (((((((((((() => {...} a résolu le problème, mais dans mon vrai projet, cela ne fonctionne pas ... peut quelque chose de gâcher?


J'ai mis à jour une question. J'ai donc essayé de mettre tout le code JavaScript dans l'état prêt, mais cela n'a pas fonctionné de toute façon.



0
votes

Utilisation du navigateur Chrome, j'ai trouvé que la réponse (ou tout innerhtml que vous souhaitez utiliser comme nouvelle page) doit être commencer strictement avec la balise forte>. Pas strong> ou STROND> ou quelque chose d'autre, autrement remplaçant innerhtml code> ou en utilisant document.write (réponse) tire toujours le contenu entier à l'intérieur ... corps> strong> tag.

Voici le snippet / la page que j'ai utilisé localement pour essayer toutes les suggestions que j'ai vu (et je n'ai pas fait t Travaux), jusqu'à ce que j'ai essayé de condenser le nouveau contenu / la nouvelle chaîne à " ... tête> ... corps>" P> p>

<head>
  <title>Some Page Title</title>
</head>

<body>
  <p>Some body content.<br>Inspect the head element before and after button click.</p>
  <button type="button" id="replace-content-btn">Replace entire HTML</button>
</body>


0 commentaires