Modifier DOM et inclure du php

by kewan888

HTML

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
		<div id="pieces">
			<div id="piece1">
				Pièce 1 <span id="listePiece1"><?php include("/var/www/compte_rendu/liste_piece.php");?></span>
				Prix <input type="number" name="prix1" id="prix1" />
				Quantité <input type="number" name="quantite1" id="quantite1" />
			</div>
		</div>
		<div id="ajouterPiece">
			<input type="button" name="buttonAjouterPiece" id="buttonAjouterPiece" value="Rajouter une pièce" onClick="ajouterPiece(1); includeListePieces(1)" />
		</div>
		<script type="text/javascript" src="/test2.js"></script>
		<script>
			function includeListePieces(numPiece){

				let numPieceSuivante = numPiece + 1;

				let codePhp = `<?php include("/var/www/compte_rendu/liste_piece.php");?>`;
				document
					.getElementById("listePiece" + numPieceSuivante)
					.innerHTML = codePhp;
			}
		</script>
	</body>
</html>

JavaScript

function ajouterPiece(numPiece) {
	// console.log("Passage fonction ajouterPiece");

	let nouvelleDiv = document.createElement("div");

	let numPieceSuivante = numPiece + 1;

	document
		.getElementById("pieces")
		.appendChild(nouvelleDiv)
		.setAttribute("id", "piece" + numPieceSuivante);

	const nouvellePiece = document.getElementById("piece" + numPieceSuivante);
	nouvellePiece.innerHTML =
	`Pièce ` + numPieceSuivante +`
	<span id="listePiece` + numPieceSuivante +`"></span>
	Prix
	<input type="number" name="prix` + numPieceSuivante + `" id="prix` + numPieceSuivante + `" />
	Quantité
	<input type="number" name="quantite` + numPieceSuivante + `" id="quantite` + numPieceSuivante + `" />`

	document.getElementById('ajouterPiece').innerHTML = '<input type="button" name="buttonAjouterPiece" id="buttonAjouterPiece" value="Rajouter une pièce" onClick="ajouterPiece(' + numPieceSuivante + '); listePiece(' + numPieceSuivante + ')" />';
}