Insertion balise html avec innerHTML
Bonjour,
Je dois intégrer plusieurs balises html (ex : <div id="mysection"><div class = "mycontainer"><h1>mytitle</h1></div></div>) pour formater visuellement certaines données (dans l'exemple "mytitle").
Pour être plus concret, dans mon HTML j'ai une balise <span id="datahere"></span> qui ressort les données en javascript que je dois ainsi modifier :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| function Bigdata(title, subtitle, type) {
const mydata = document.getElementById('datahere');
mydata.innerHTML += title + subtitle + (type ? ' <strong>(type is ' + type + ')</strong>' : '') +'<br/>';
}
//élément dans lequel les données sont initialisées, visible dans un autre <span>
const sprit = document.getElementById('sprit');
//lorsqu'un message donné est reçu
sprit.addEventListener(SpritEvents.MessageSprit, ({ data }) => {
Bigdata('Sprit', data.text, data.type);
// s'il y a des actions, nous proposons des liens
if (data.actions) {
var links = '';
for (var i = 0; i < data.actions.length; i++) {
if (i > 0) {
links += ', ';
}
let act = data.actions[i];
links += '<a data-val="' + act.value + '">' + act.title + '</a>';
}
Bigdata('Sprit', links);
}
}); |
Mon problème, car novice, et que je n'arrive pas à intégrer les balises qui doivent "contenir" des données (titre, sous-titre, type) AVEC des liens s'il y a des actions ...
si j'ajoute mes balises comme ceci :
Code:
mydata.innerHTML += '<div id="mysection"> <div class="mycontainer"><h1>' + title + '</h1>' + subtitle + (type ? ' <strong>(type =' + type + ')</strong>' : '') +'<br/></div></div>';
cela n'entoure pas le tout, les div et le h1 sont dupliqués : entoure d'un côté le titre, le sous-titre, le type et de l'autre côté les liens... la structure ressort ainsi :
Code:
<div id="mysection"><div class="mycontainer"><h1>title</h1>subtitle <strong>(type = the_type)</strong><br/></div></div> <div id="mysection"> <div class="mycontainer"><h1></h1><a data-val="">link1</a>,<a data-val="">link2</a>)<br/></div></div>
Je ne sais pas comment m'y prendre... je vois bien que J'espère que vous pourrez m'aider
