Insérer plusieurs lignes dans le DOM

Version imprimable

Voir 40 message(s) de cette discussion en une page

Bonjour, je souhaiterais insérer ces lignes de code dans ma page principale

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<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

Code:

1
2
3
4
5
6
7
8
9
10
11
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

07/02/2020, 10h37
SpaceFrog

Code:

document.getElementById("add_struct")

il est ou l'element avec cet id ? je ne le vois pas dans le code fourni
07/02/2020, 10h50
mattmax55

Il est dans une autre page .php
07/02/2020, 10h53
SpaceFrog

Et quel est le lien entre tes pages ?
07/02/2020, 10h58
mattmax55

En gros j'appelle le fichier index.js (avec le script pour insérer les elements) depuis le fichier index.php qui est ma page principal
07/02/2020, 11h06
SpaceFrog

a quel moment le fichier js est il "inclus" dans ta page php ?
quand le js est il interpété ?
07/02/2020, 11h30
mattmax55

Il est inclus a la fin de la balise body avec <script src='index.js'></script>
mais de ce coté tout va bien, le problème c'est surtout de pouvoir insérer dans la page, plusieurs lignes de code
07/02/2020, 11h49
SpaceFrog

Citation:

Il est dans une autre page .php...

La page qui inclut le script en base de page ?

Je ne vois toujours pas d'id add_struct ...

Voici le contenu de la page index.php

Code:

1
2
3
4
5
6
<body>
<div class="link_contain" id="add_struct">
 
</div>
<script src='index.js'></script>
</body>

et voici le contenu de index.js

Code:

1
2
3
4
5
6
7
8
9
10
 
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>'+
            '</ul>'+
            '</div>'+
            '</li>';
        document.getElementById("add_struct").innerHTML=base;

07/02/2020, 12h04
SpaceFrog

https://jsfiddle.net/z1g2fkca/

en mettant le code dand le même fichier

Hormis le fait que tu insères directement un li dans un div et pas dans un ul ...

La question est alors ... est ce que le path vers ton index.js est bon ?
07/02/2020, 12h18
mattmax55

Je comprends pas pk ca ne marche tjrs pas même en ayant mis le code js dans index.php. N'y aurait-il pas un autre moyen que innerHTML sinon?
07/02/2020, 12h23
javatwister

Bonjour,

La structure du bloc que tu veux insérer n'a rien de logique;

1) Comme dit SpaceFrog, ton li sans ul est incorrect
2) Tes balises i ne servent à rien vu leur emplacement
3) Tu veux affecter une variable php en cliquant dans un div (bon courage);
4) En traitant toutes ces balises avec innerHTML tu t'exposes à des erreurs de quotes, à des confusions dans la hiérarchie et à une maintenance trrrrès délicate.
07/02/2020, 12h44
mattmax55

Comment est ce que je devrais m'y prendre du coup pour remplacer innerHTML?
07/02/2020, 12h57
javatwister

Ben si tu veux te faire une liste de liens tu n'as pas besoin de javascript;
Tu stockes tes liens dans un fichier php dont tu affiches le contenu au chargement;
07/02/2020, 13h50
SpaceFrog
en php :
Code:

1 2 3 <ul> <?php incude('liens.php'); ?> </ul>
et dans lien.php
le code des li ...
07/02/2020, 14h18
Invité
Bonjour,

ça fait plusieurs discussions que tu ouvres, et je n'ai toujours pas compris l'objectif final du truc...
- tu veux récupérer un tableau PHP via JS,
- maintenant tu veux copier du HTML via JS *
- ...
Peux-tu nous expliquer TRÈS CLAIREMENT le contexte général ?

* script index.js :
Code:

1 2 3 ... '<li><div ... onclick="<?php $name_str="otacos" ?>">...</li>'+ ...
Le code PHP n'a AUCUNE chance d'être interprété ** dans un fichier dont l'extension est .js.

** Par défaut (sauf directive spécifique)
07/02/2020, 14h43
SpaceFrog

@jr => Sauf si il y une directive spécifique sur le serveur ...
07/02/2020, 14h57
Invité

@SpaceFrog
Et si ma tante en avait....

J'ai rajouté :

Citation:

"** Par défaut (sauf directive spécifique)".
07/02/2020, 15h00
SpaceFrog

:mrgreen:
07/02/2020, 19h27
mattmax55

Citation:

Envoyé par jreaux62

Peux-tu nous expliquer TRÈS CLAIREMENT le contexte général ?

Alors en fait j'ai des listes stockées dans des tables elles même stockées dans des db. En gros, j'aimerais récupérer les noms des db (structures) et faire une liste déroulante de bouttons pour chaque noms de db avec les listes de chaque structure. Du coup je récupère d'abord les noms des db et leurs listes dans un tableau en 2D pour ensuite afficher les listes déroulantes de chaque structure dans une barre de navigation

Voir 40 message(s) de cette discussion en une page