Inserer plusieurs lignes dans le DOM

Signaler
-
jordane45
Messages postés
27633
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 février 2020
-
Bonjour, je souhaiterais insérer ces lignes de code dans ma page principale
<li class="item">
                <a href="#structures" class="link" id="btn" >Otacos<i class="fas fa-sort-down"></i></a>
                <div class="smenu">
                    <ul>
                    <li><div class="link" data-name="newsite" onclick="<?php $name_str="otacos" ?>"><i class="fas fa-plus">
                    </i>Add new Marketsite</div></li>
                    <li><div class="link" data-name="deliveroo"><i class="fas fa-hamburger"></i>Deliveroo</div></li>
                    <li><div class="link" data-name="justeat"><i class="fas fa-pizza-slice"></i>Just Eat</div></li>
 
                    </ul>
                </div>
 
            </li>


Or je n'y arrive pas en utilisant innerHTML
Voici ce que j'ai essayé de faire sans succès

base='<li class="item">'+
            '<a href="#structures" class="link" id="btn" >Otacos<i class="fas fa-sort-down"></i></a>'+
            '<div class="smenu">'+
            '<ul>'+
            '<li><div class="link" data-name="newsite" onclick="<?php $name_str="otacos" ?>"><i class="fas fa-plus"></i>Add new Marketsite</div></li>'+
            '<li><div class="link" data-name="deliveroo"><i class="fas fa-hamburger"></i>Deliveroo</div></li>'+
            '<li><div class="link" data-name="justeat"><i class="fas fa-pizza-slice"></i>Just Eat</div></li>'+
            '</ul>'+
            '</div>'+
            '</li>';
        document.getElementById("add_struct").innerHTML=base;


Avez vous une solution pour afficher plusieurs lignes html imbriquées ?
Merci par avance

1 réponse

Messages postés
27633
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 février 2020
2 124
Bonjour,

Commence par tester ça :
var base = '<li class="item">'
      +'<a href="#structures" class="link" id="btn" >Otacos<i class="fas fa-sort-down"></i></a>'
      +'<div class="smenu">'
      +'<ul>'
      +'<li><div class="link" data-name="newsite" onclick="<?php $name_str="otacos" ?>"><i class="fas fa-plus"></i>Add new Marketsite</div></li>'
      +'<li><div class="link" data-name="deliveroo"><i class="fas fa-hamburger"></i>Deliveroo</div></li>'
      +'<li><div class="link" data-name="justeat"><i class="fas fa-pizza-slice"></i>Just Eat</div></li>'
      +'</ul>'
      +'</div>'
      +'</li>';
if(typeof(document.getElementById("add_struct"))!='undefined'){      
  document.getElementById("add_struct").innerHTML=base;
}else{
  alert('add_struct est introuvable dans la page !');
}

Pense à regarder dans la console de ton navigateur si il n'y a pas d'erreur de script

Et bien entendu... ton JS est placé de telle sorte qu'il ne se déclenche qu'une fois tous les éléments de ta page chargés.

merci pour la réponse, le seule problème est qu'il enlève tout les autre lignes de la balise id="add_struct"
Comment est ce que je fait pour ajouter l'élément sans enlever les autres éléments enfants?
jordane45
Messages postés
27633
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 février 2020
2 124 > mattmax
Si je te dis :
valeur = valeur  + nouvellevaleur

y'a plus qu'à adapter à ton code