Div застрял в Div при вставке с использованием appendChild PHP - PullRequest
1 голос
/ 28 марта 2020

Я пытаюсь вставить div в страницу HTML, используя для l oop и метод appendChild в PHP. Проблема, с которой я сталкиваюсь, заключается в том, что первый div всегда оказывается застрявшим во втором div, который всегда оказывается застрявшим в третьем div и так далее, и так далее. Итак, как мне закончить div в конце для l oop?

///The PHP Side
// Create an insertion point for the Projects element
$projectInsert = $doc->getElementById("projects");

// Create a project Box
for ($x = $row_cnt; $x > 0; $x--) {

$sql2 = "SELECT * FROM `$prjct` WHERE id=$x";
$result2 = mysqli_query($db,$sql2);
$row2 = mysqli_fetch_array($result2,MYSQLI_ASSOC);

//Insert a project Box
$projectBox = $doc->createElement('div');
$projectBox->setAttribute("class","projectBox");
$project_element_title = $doc->createElement('p', $row2["title"]);
$project_element_description = $doc->createElement('p', $row2["description"]);

$projectInsert->appendChild($projectBox);
$projectInsert->appendChild($project_element_title);
$projectInsert->appendChild($project_element_description);

}



//Here's where it's inserting in the HTML
<div class="projectBar" id="projectsBar">
<h4 style="height: 30%; width: 100%; margin: auto;">Projects</h4>
<p id="projects"></p>
</div>

Вот фотографии того, что происходит, и того, что я хочу, чтобы сделать

https://docs.google.com/presentation/d/1OgthPueXHzGXyUi6L3DmgWTtOr6gHpfj8LgGh5OG85Y/edit?usp=sharing

Поскольку я новичок, я не могу вставлять изображения.

Спасибо за любую помощь!

1 Ответ

1 голос
/ 28 марта 2020

Вместо добавления потомков ($project_element_title и $project_element_description) к родителю ($projectBox), вы добавляете его к супер-родителю ($projectInsert), вот в чем проблема.

Так что измените:

 $projectInsert->appendChild($project_element_title);
 $projectInsert->appendChild($project_element_description);

К

 $projectBox->appendChild($project_element_title);
 $projectBox->appendChild($project_element_description);
...