保存带有内部元素的 div 并向所有人展示

Question

我有 jQuery，可以div在按钮单击时使用内部元素。我希望div将其保存在表格中并向访问该页面的任何人显示。

我有两个问题：

1. 在该答案中，它仅显示一个元素 ( <li>)。我将如何保存附加在我的内部的其他元素div？在下面的编辑和问题的答案中回答

2. 我如何div在页面加载时加载添加这些保存的内容？我想制作 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之后，使用适当的 CSS 添加<div>和</div>到您的字符串中，以将字符串输入并存储在数据库中。参见演示：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 {&nbsp; border-radius: 5px;&nbsp; background-color: white;&nbsp; padding: 20px;&nbsp; width: 300px;&nbsp; height: 220px;&nbsp; float: left;&nbsp; margin-left: 60px;&nbsp; position: relative;&nbsp; margin-bottom: 50px;&nbsp; align-items: center;&nbsp; justify-content: center;&nbsp; box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.13), 0 14px 30px 0 rgba(0, 0, 0, 0.09);&nbsp; transition-duration: 0.2s;}.container:hover {&nbsp; width: 300px;&nbsp; height: 225px;&nbsp; margin-top: -5px;&nbsp; transition-duration: 0.2s;}<form name="f" action="">&nbsp; <!--Change type from 'text' to 'hidden' to hide it from users-->&nbsp; <!--and from 'button' to 'submit' so form would submit-->&nbsp; <input name="div-value" type="text" value="">&nbsp; <input name="add-button" type="button" id="add-button" value="Add DIV" onclick="Add()"></form>请注意，在实际情况下，该Add函数将通过将表单提交到以下 PHP 脚本来完成：PHP 添加div到表/*&nbsp;* Following 2 PHP codes have been provided by the OP to benefit other community&nbsp;&nbsp;* members who might find them useful.*/try {&nbsp; &nbsp; // $dbh is connection to database&nbsp; &nbsp; $div = $_GET['div-value'];&nbsp; &nbsp; $div2 = '<div class="container">'.$div.'</div>';&nbsp; &nbsp; $stmt = $dbh->prepare('INSERT INTO Feedback(Element) VALUES(:element)');&nbsp; &nbsp; $stmt->bindParam(':element', $div2, PDO::PARAM_STR);&nbsp; &nbsp; $stmt->execute();&nbsp; &nbsp; echo "Insert successful!<br/>";} catch (PDOException $e) {&nbsp; &nbsp; echo "Error!: ",&nbsp; $e->getMessage(), "<br/>";&nbsp; &nbsp; die();}并会使用以下 PHP 脚本检索所有这些divs：divPHP从表中检索所有stry {&nbsp;// $dbh is also connection to database&nbsp;$stmt = $dbh->prepare("SELECT Element FROM Feedback");&nbsp;if ($stmt->execute()) {&nbsp; &nbsp; while ($row = $stmt->fetch()) {&nbsp; &nbsp; &nbsp; print_r($row["Element"]);&nbsp; &nbsp; }&nbsp;}}} catch (PDOException $e) {&nbsp; &nbsp; echo "Error!: ",&nbsp; $e->getMessage(), "<br/>";&nbsp; &nbsp; die();}