J'ai essayé d'utiliser Ainsi, par exemple, si je veux remplacer ce contenu: p> puis je vérifie ma structure HTML dans Inspecteur, et le résultat ceci: p> 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> 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> $ ("html"). HTML (this.responseText); code>. Qui remplace le contenu, mais il ne remplace pas les étiquettes de la tête et du corps. <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>
5 Réponses :
innerhtml code>, vous pouvez remplacer toute la teneur en HTML de l'élément. $( document ).ready(function() {
$('html').html('...');
});
Comme je l'ai signalé, cela peut être fait
document.querySelector('html').innerHTML = '<div>yolo</div>';
Tout comme une alternative, vous pouvez attraper le corps et aller à son parent document.body.parentElement code>. Ne vous donne probablement pas vraiment d'avantage ici i> 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
Rechercher Tag Contenu dans votre chaîne:
Remplacez la teneur en tête et au corps avec le corps et la tête dans votre réponse: P>
Fonction GetByTag (TagName, HTMLVAL) {
var taghtmvalue = $ (htmlval) .find (TagName) .html ();
retour taghtmvalue;
} code> p>
$ ("tête"). HTML (GetByTag ("Head", cela.ResponseTex)); Code>
$ ("corps"). HTML (GetByTag ("Corps", cela.Responsonetex)); Code> P>
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>
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.
Utilisation du navigateur Chrome, j'ai trouvé que la réponse (ou tout innerhtml que vous souhaitez utiliser comme nouvelle page) doit être 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 à " innerhtml code> ou en utilisant document.write (réponse) tire toujours le contenu entier à l'intérieur <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>
Si je fais
document.QuerySelector ('html'). Innertext = 'yolo' code> il remplace tout. Je ne suis pas sûr de ce que JQuery fait, mais cela fera ce dont vous avez besoinQuel navigateur est-ce?
$ ("HTML"). HTML ("Somme texte") CODE> Efface tout pour moi dans Firefox. En outre, êtes-vous sûr que lethis.responseText code> ne contient pas ces tags?Le responsable contient ces tags, j'ai vérifié. J'utilise Firefox