0
votes

Pourquoi la boucle et le tableau cessent de fonctionner après l'ajout de innerHTML?

Tout fonctionne bien sauf le HTML interne. J'obtiens le nom du parent mais dès que j'ajoute innerHTMl dans le code, cela ne fonctionne pas. Je veux obtenir innerHTML de chaque parent dans la boucle, le tableau ..., je ne sais pas pourquoi cela ne fonctionne pas, où est-ce que je me trompe?

Exemple:

<div id="container">
  <div class="parent" name="parentone">
    <div id="childone" style="height:10px">
      <div id="childtwo" style="background-color:red"></div>
    </div>
  </div>
  <div class="parent" name="parenttwo">
    <div id="childthree" style="height:10px"></div>
  </div>
</div>
<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

function myFunction() {
  var divs = Array.prototype.slice.call(document.getElementById("container").querySelectorAll('*'));
  var divsname = Array.prototype.slice.call(document.getElementsByClassName("parent"));
  var divshtml = Array.prototype.slice.call(document.getElementsByClassName("parent")).querySelectorAll('*').innerHTML;
  // Loop over the array
  var results = "";
  var name = "";
  divsname.forEach(function(div) {
    name += div.getAttribute("name");
    var innerhtml = "";
    divs.forEach(function(div) {
      innerhtml += divshtml;
    });
    results = "<br> Div element" + name + "have innerHTML" + innerhtml + ".";

  });

  document.getElementById("demo").innerHTML = results;
}

Veuillez me guider pour ce problème.

Merci

javascript foreach arrays loops innerhtml

2 commentaires

results = "<br> Div element" + name + "have innerHTML" + innerhtml + , il s'agit d'une erreur de syntaxe due à l'opérateur arithmétique de fin. Tout s'arrêtera lorsque le navigateur lira cette ligne. Êtes-vous sûr de lire le journal de la console du navigateur?

Je l'ai mal saisi depuis mon ordinateur, mais cela ne fonctionne toujours pas

3 Réponses :

0
votes

Essaye le:

function myFunction() {
  var divs = Array.prototype.slice.call(document.getElementById("container").querySelectorAll('*'));
  var divsname = Array.prototype.slice.call(document.getElementsByClassName("parent"));
  
  var temp = document.querySelectorAll("*");
  var divshtml = Array.prototype.slice.call(temp).innerHTML;
  // Loop over the array
  var results = "";
  var name = "";
  divsname.forEach(function(div){
    name += div.getAttribute("name");
  var innerhtml = "";
  divs.forEach(function(div){
    innerhtml += divshtml;
  });
    results = "<br> Div element" + name + "have innerHTML" + innerhtml;

  });

  document.getElementById("demo").innerHTML = results ; 
}

querySelectorAll est une méthode sur les éléments DOM qui accepte un sélecteur CSS et renvoie une NodeList statique des éléments correspondants.

Array.prototype.slice.call est un moyen de transformer cette NodeList (qui agit comme un tableau, mais ne possède pas les méthodes de Array.prototype) en un véritable tableau.

1 commentaires

J'ai besoin d'obtenir innerHTML de chaque classe = parent individuellement. Si ajouter: var temp = document.getElementsByClassName ("wp-activ"). QuerySelectorAll‌ ("*"); Ca ne fonctionne pas!

0
votes

parce que document.getElementByClassName n'est pas une fonction, vous devriez essayer avec id

  <div id="parent" name="parenttwo" >

dans le HTML:

  var divshtml = Array.prototype.slice.call(document.getElementById("parent").querySelectorAll('*'));

1 commentaires

Cela ne devrait être qu'avec classe, pas avec id, une idée d'une autre solution possible?

0
votes

Par classe, vous pouvez faire comme ceci, cela vous donnera tous les éléments du nœud interne entre ce nœud de classe:

let divshtml = Array.prototype.slice.call(document.getElementsByClassName("randerHTML")[0].querySelectorAll('*'));

Remarque: il retournera NodeList et non la chaîne comme innerHTML

0 commentaires