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)

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>

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)

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)