Сохранение div с внутренними элементами и показ всем

Question

У меня jQuery, что составляет div с внутренними элементами при нажатии кнопки. Я хочу, чтобы div был сохранен в таблице и показан всем, кто заходит на эту страницу.

Я прочитал этот вопрос Сохранение добавленных элементов в базу данных . Теперь у меня есть два вопроса:

1. В этом ответе он отображается только для одного элемента (<li>). Как бы я сохранил другие элементы, которые добавлены внутри моего div? Ответил в редактировании ниже и в ответе на вопрос
2. Как мне загрузить добавить эти сохраненные div s при загрузке страницы? Я думал сделать PHP код, который ищет все строки с этими элементами из столбца и echo их при загрузке страницы

Полный пример JSFiddle

Div что я хочу сохранить:

var div = document.createElement("DIV");
var p = document.createElement("P");
var line = document.createElement("HR");
var text = document.createElement("P");
div.className = 'container';
p.className = 'date';
p.id = 'demo';
line.className = 'line1';
text.id = "text";
text.className = "feedback-container-text";
document.body.appendChild(div);
div.appendChild(p);
div.appendChild(line);
div.appendChild(text);
document.getElementById("text").innerHTML = "some text";
var d = new Date();
d.getDay();
document.getElementById("demo").innerHTML = d;

.container {
  border-radius: 5px;
  background-color: white;
  padding: 20px;
  width: 300px;
  height: 220px;
  float: left;
  margin-left: 60px;
  position: relative;
  margin-bottom: 50px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.13), 0 14px 30px 0 rgba(0, 0, 0, 0.09);
}

.container:hover {
  width: 300px;
  height: 225px;
  margin-top: -5px;
  transition-duration: 0.2s;
}

Answer 1

Возьмите атрибут innerHTML включающего тега <div>

savedHTML = div.innerHTML;
// save to database

. После этого добавьте <div> и </div> с соответствующими CSS в строку для ввода и сохранения строки. в базе данных.

См. демонстрацию:

function Add() {
var div = document.createElement("DIV");
var p = document.createElement("P");
var line = document.createElement("HR");
var text = document.createElement("P");
div.className = 'container';
p.className = 'date';
p.id = 'demo';
line.className = 'line1';
text.id = "text";
text.className = "feedback-container-text";
document.body.appendChild(div);
div.appendChild(p);
div.appendChild(line);
div.appendChild(text);
document.getElementById("text").innerHTML = "some text";
var d = new Date();
d.getDay();
document.getElementById("demo").innerHTML = d;

savedHTML = div.innerHTML;
document.f["div-value"].value = savedHTML;
}

.container {
  border-radius: 5px;
  background-color: white;
  padding: 20px;
  width: 300px;
  height: 220px;
  float: left;
  margin-left: 60px;
  position: relative;
  margin-bottom: 50px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.13), 0 14px 30px 0 rgba(0, 0, 0, 0.09);
  transition-duration: 0.2s;
}

.container:hover {
  width: 300px;
  height: 225px;
  margin-top: -5px;
  transition-duration: 0.2s;
}

<form name="f" action="">
  <!--Change type from 'text' to 'hidden' to hide it from users-->
  <!--and from 'button' to 'submit' so form would submit-->
  <input name="div-value" type="text" value="">
  <input name="add-button" type="button" id="add-button" value="Add DIV" onclick="Add()">
</form>

Обратите внимание, что в реальной ситуации функция Add завершится, отправив форму в следующий скрипт PHP:

PHP для добавления div в таблицу

---

/*
 * Following 2 PHP codes have been provided by the OP to benefit other community 
 * members who might find them useful.
*/
try {
    // $dbh is connection to database

    $div = $_GET['div-value'];
    $div2 = '<div class="container">'.$div.'</div>';

    $stmt = $dbh->prepare('INSERT INTO Feedback(Element) VALUES(:element)');
    $stmt->bindParam(':element', $div2, PDO::PARAM_STR);
    $stmt->execute();
    echo "Insert successful!<br/>";
} catch (PDOException $e) {
    echo "Error!: ",  $e->getMessage(), "<br/>";
    die();
}

и извлечение всех этих div с помощью следующего сценария PHP:

PHP в извлечь все div с из таблицы

---

try {
 // $dbh is also connection to database
 $stmt = $dbh->prepare("SELECT Element FROM Feedback");
 if ($stmt->execute()) {
    while ($row = $stmt->fetch()) {
      print_r($row["Element"]);
    }
 }
}
} catch (PDOException $e) {
    echo "Error!: ",  $e->getMessage(), "<br/>";
    die();
}