Mettre du texte provenant d'une div dans une autre div

Bonjour, je suis débutant en ce qui concerne le HTML, CSS et JS et j'aimerais mettre le texte d'une de mes div dans une autre div qui serait un encadrer et pour cela j'ai utilisé JS, j'ai un debut mais je n'arrive pas a aller plus loin. Pour etre plus precis je voudrais que le texte contenus dans

<div id="text">

se retrouve dans

<div id="border4">

quand la souris passe sur ma div text mais j'ai juste reussi a faire ne sorte a ce que du texte spécifique se retouve dans mon encadrer quand on passe la souris et autre probleme ce texte ne s'éfface pas quand on enleve la souris donc voici le code HTML dans lequel se trouve aussi mon code JS :

	<div id="inline">	
	<div id="menu_deroulant">
	<div id="border3">
<div id="test">
    <li>
	<a href="">
	<img src="image.png" height=200px/>
	</a>
<ul>
 <li>
<div id="text">texte</div>
 </li>
</ul>
	</li>
		</div></div></div></div>
		
		

	<div id="border4">
	<script>
				test.addEventListener("mouseenter", function( event ) {
							var div = document.getElementById('border4');
							border4.innerHTML += ("texte");
					test.stopPropagation();		  
			setTimeout(function() {
		}, none);
	}, false);
	</script>
  </div>

je pourrais aussi vous envoyer le code CSS si besoin
Merci de votre temps
Modifié par maxence-g (30 Jan 2021 - 18:00)

premièrement merci pour la réponse et deuxièmement je sais que mon code dois ressembler a du chinois donc pourriez vous me dire ou sont mes fautes et comment améliorer mon code svp

maxence-g a écrit :
je sais que mon code dois ressembler a du chinois

C'est du "html" non valide

maxence-g a écrit :
pourriez vous me dire ou sont mes fautes et comment améliorer mon code svp

1. présenter un code, c'est avant tout un code facilement lisible. Qu'est-ce qu'un code lisible ? espacé, indenté
2. <li> doit obligatoirement avoir comme parent <ol> ou <ul> et non <div>. Ensuite, <li> n'est pas un mono élément. Doit avoir obligatoirement son élément de fermeture
3. la valeur d'un attribute html doit avoir de simples ou doubles guillements.
4. il n'est pas utile d'ajouter "px" pour la valeur de height.
Modifié par niuxe (30 Jan 2021 - 20:10)

j'ai essayé de "ranger" ça au mieux mais je ne suis toujours pas sûr que ce soit bien et pour ce qui est du Javascript en effet je ne connais pas grand-chose et je me suis aidé de fragments de codes trouver sur internet donc voici le codes, j'ai essayé d'enlever ce qui ne m'était pas indispensable

		<div id="inline">	
				<div id="menu_deroulant">
						<div id="border3">
								<div id="text_border_JS">
	
	<img src="image.png" height=200/>
	
<div id="text">texte</div>
		
		</div>
				</div>
						</div>
								</div>
		

	<div id="border4">
	<script>
					text_border_JS.addEventListener("mouseenter", function( event ) {
									var div = document.getElementById('border4');
									border4.innerHTML += ("texte");	  
					(function() {
					}, none);
					}, false);
	</script>
  </div>

- indente mieux ton code ..... .... .....
- Je pense que tu devrais sortir script de #border4
- les parenthèses qui entourent "texte" ne servent à rien
- Qu'est ce que text_border_JS ? (et pour plus tard, que vaut this)
- Qu'est ce que border4 ?
- ta pseudo closure ne sert à rien et ça doit être syntaxiquement faux

(function() {
}, none);

- comment cibler text / border4 ?
- qui fait quoi et comment (mouseenter) ?
Modifié par niuxe (01 Feb 2021 - 03:52)

text_border_JS est la div que je voudrais insérer dans border4 et border4 est justement la div qui me sert d'encadrer voici le CSS de border4 au cas ou:

div#border4 {
border: width style color;
border: solid 2px #EE1C25;
padding: 10px;
border-radius: 5px;
display:block;
margin-left:20%;
margin-right:20%;
width:auto;
height: auto;
text-align:center;
}

désoler si il y a encore des fautes dans ce code et mouseenter me sert a ce que quand je passe ma souris sur mon image, le texte s'affiche dans mon encadrer
j'espère avoir répondu aux questions
Modifié par maxence-g (02 Feb 2021 - 16:39)

Bonjour,

niuxe a écrit :
Qu'est ce que text_border_JS ? (et pour plus tard, que vaut this)

Une bizarrerie peu connue est que lorsque l'on attribue un id à un élément html, une variable globale est créée par javascript ayant pour nom la valeur de cet id..

C'est limite hérétique, mais ça explique d'où vient text_border_JS (vu qu'il y a un élément qui a " text_border_JS" pour id.

Amicalement,

parsimonhi a écrit :
Une bizarrerie peu connue est que lorsque l'on attribue un id à un élément html, une variable globale est créée par javascript ayant pour nom la valeur de cet id..

Oui je viens de tester et en effet on peut cibler l'élément. Je ne savais pas du tout. Mais dans ce cas, paye tes collisions de variables et donc, de bugs. Dans un sens, la méthode .getElementById n'a plus raison d'être.

Merci beaucoup pour ce détail

@maxence-g: regarde ceci : https://codepen.io/niuxe/pen/KKNdPZV?editors=1111

Bonjour,

PapyJP a écrit :

C’est du standard? Ça marche partout?
C’est quoi « la valeur » d’un id? Le noeud DOM qui contient cet id je suppose ?

1) C'est hérité d'ie. À ma connaissance, ce n'est pas standard (et il faut souhaiter que cela ne le soit jamais) mais c'est supporté par la quasi totalité des navigateurs (pour justement être compatible avec des codes développés pour ie).

2) La valeur est effectivement l'élément HTML (comme si on faisait un document.getElementById(id)).

3) Il ne faut jamais utiliser ça (nid à bugs comme l'a fort bien souligné Niuxe).

Amicalement,

parsimonhi a écrit :
C'est hérité d'ie.

Ah bah, c'est pas le meilleur héritage vu les bouzes que c'étaient. Microsoft, on t'aime avec tes pratiques de variables globales.
Modifié par niuxe (03 Feb 2021 - 13:56)

tous d'abord merci a niuxe pour son code et maintenant comment puis-je faire si je veux que cet évènement se reproduise avec d'autres images et pour faire ne sorte a ce que quand on retire la souris de l'image, le texte qui y est associer se retire
Merci