Inserer plusieurs lignes dans le DOM

Fermé

mattmax - 7 févr. 2020 à 10:39
jordane45 Messages postés 38296 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 novembre 2024 - 7 févr. 2020 à 13:52

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

A voir également:

Inserer plusieurs lignes dans le DOM
Insérer une vidéo dans powerpoint - Guide
Insérer signature word - Guide
Insérer liste déroulante excel - Guide
Insérer sommaire word - Guide
Insérer une image dans word sans bouger le texte - Guide

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38296 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 novembre 2024 4 704
7 févr. 2020 à 12:31

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.

mattmax
7 févr. 2020 à 12:58

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 38296 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 19 novembre 2024 4 704 > mattmax
7 févr. 2020 à 13:52

Si je te dis :

valeur = valeur  + nouvellevaleur

y'a plus qu'à adapter à ton code

Discussions similaires

Afficher toutes les lignes masquées excel

Avis site Crush dom tom / crushdomtom.com

Insérer un pdf de plusieurs pages dans word.