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

Question

我有 jQuery，可以div在按钮单击时使用内部元素。我希望div将其保存在表格中并向访问该页面的任何人显示。我有两个问题：在该答案中，它仅显示一个元素 ( <li>)。我将如何保存附加在我的内部的其他元素div？在下面的编辑和问题的答案中回答我如何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 {

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

}

并会使用以下 PHP 脚本检索所有这些divs：

divPHP从表中检索所有s

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

}