javascript - 如何从用户添加 div 和内容？

Question

我实际上是网络领域的初学者。我是学习者，也在做这个元素。我在制作一个自行创建的 div 时遇到问题，其中包含链接等内容和一些用户定义的文本。每当用户按下 ADD 按钮时，div 将自动创建，并要求用户添加标题(成为链接)等内容，然后添加一些文本。
你能告诉我我应该使用哪些 JavaScript 或 jquery 函数吗？


喜欢:

                                                          ---------
                                                         |   ADD   |
                        -----------  //First div          ---------
                       |  Link     |
                       |           |
                       |  Text     |
                       |description|
                       |           |
                        -----------


                        ----------- //Second div
                       |  Link     |
                       |           |
                       |  Text     |
                       |description|
                       |           |
                        -----------

                        ----------- //Third Div
                       |  Link     |
                       |           |
                       |  Text     |
                       |description|
                       |           |
                        -----------

Answer 1

你可以做一个简单的脚本，以这种方式使用两个段落标签附加链接和文本描述:

$(function () {
  $("#addBtn").click(function () {
    $("#target").append('<li><p><a href="#">Link Description<\/a><\/p><p>Text Description<\/p><\/li>');
  });
});

/* Global Reset */
* {font-family: Segoe UI; margin: 0; padding: 0; list-style: none;}
a {text-decoration: none;}

/* Margin for Para */
p {margin: 0 0 5px;}
/* Box for the text content */
ul {display: block; margin: auto; width: 50%;}
li {border: 1px solid #999;}

/* Style for Button */
#addBtn {display: block; padding: 3px 10px; cursor: pointer; margin: auto;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- Add Button -->
<input type="button" value="Add" id="addBtn" />

<!-- We will use an unordered list for adding the contents and use an ID target -->
<ul id="target"></ul>

如果需要，您可以像下面那样添加 contenteditable 以使其可编辑。

$(function () {
  $("#addBtn").click(function () {
    $("#target").append('<li><p contenteditable><a href="#">Link Description (Click and Edit)<\/a><\/p><p contenteditable>Text Description (Click and Edit)<\/p><\/li>');
  });
});

/* Global Reset */
* {font-family: Segoe UI; margin: 0; padding: 0; list-style: none;}
a {text-decoration: none;}

/* Margin for Para */
p {margin: 0 0 5px;}
/* Box for the text content */
ul {display: block; margin: auto; width: 50%;}
li {border: 1px solid #999;}

/* Style for Button */
#addBtn {display: block; padding: 3px 10px; cursor: pointer; margin: auto;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- Add Button -->
<input type="button" value="Add" id="addBtn" />

<!-- We will use an unordered list for adding the contents and use an ID target -->
<ul id="target"></ul>