Insérer plusieurs lignes dans le DOM

**mattmax55** · 07/02/2020, 10h35

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

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**SpaceFrog** · 07/02/2020, 10h37

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("add_struct")

il est ou l'element avec cet id ? je ne le vois pas dans le code fourni

**mattmax55** · 07/02/2020, 10h50

Il est dans une autre page .php

**SpaceFrog** · 07/02/2020, 10h53

Et quel est le lien entre tes pages ?

**mattmax55** · 07/02/2020, 10h58

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

**SpaceFrog** · 07/02/2020, 11h06

a quel moment le fichier js est il "inclus" dans ta page php ?
quand le js est il interpété ?

**mattmax55** · 07/02/2020, 11h30

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

**SpaceFrog** · 07/02/2020, 11h49

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 ...

**mattmax55** · 07/02/2020, 11h53

Voici le contenu de la page index.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;

**SpaceFrog** · 07/02/2020, 12h04

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 ?

**mattmax55** · 07/02/2020, 12h18

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?

**javatwister** · 07/02/2020, 12h23

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.

**mattmax55** · 07/02/2020, 12h44

Comment est ce que je devrais m'y prendre du coup pour remplacer innerHTML?

**javatwister** · 07/02/2020, 12h57

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;

**SpaceFrog** · 07/02/2020, 13h50

en php :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<ul>
<?php incude('liens.php'); ?>
</ul>

et dans lien.php
le code des li ...

Invité · 07/02/2020, 14h18

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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)

**SpaceFrog** · 07/02/2020, 14h43

@jr => Sauf si il y une directive spécifique sur le serveur ...

Invité · 07/02/2020, 14h57

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

J'ai rajouté :

"** Par défaut (sauf directive spécifique)".

**SpaceFrog** · 07/02/2020, 15h00

**mattmax55** · 07/02/2020, 19h27

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

Insérer plusieurs lignes dans le DOM

JavaScript

Discussions similaires

Partager

Partager