Ahorro div con elementos internos y mostrando a todo el mundo

Vepthy:

Tengo jQuery que hace divcon los elementos internos de clic de botón. Quiero que divse salve en una mesa y mostrar a alguien que va a esa página.

He leído esta pregunta Almacenamiento de elementos adjuntos a la base de datos . Ahora tengo dos preguntas:

1. En esa respuesta, que sólo muestra para un elemento ( <li>). ¿Cómo voy a salvar a otros elementos que se anexan en el interior de mi div? Contestada en editar a continuación y en la respuesta de la pregunta
2. ¿Cómo voy a cargar añadir los salvados divs al cargar la página? Pensé para hacer que el código PHP que busca en todas las filas con los elementos de la columna y echoque al cargar la página

JsFiddle Ejemplo completa

Div que quiero salvar:

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;
}

Boo Boo :

Tome el innerHTMLatributo de la encerrando <div>etiqueta

savedHTML = div.innerHTML;
// save to database

Después de eso, añadir <div>y </div>con CSS adecuada a la cadena de entrada y almacenar la cadena en la base de datos.

Ver demostración:

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>

Tenga en cuenta que en una situación real de la Addfunción completaría mediante la presentación del formulario para el siguiente script PHP:

PHP para agregar diva la mesa

---

/*
 * 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();
}

Y sería recuperar todos esos divs con el siguiente script PHP:

PHP para recuperar todos los divs de la tabla

---

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();
}