Question

我实际上是网络领域的初学者。我是学习者，也在研究这个项目。我有一个问题是创建一个自创的div，其中包含链接和一些用户定义的文本等内容。每当用户按下ADD按钮时，div将自动创建，并要求用户添加内容，如标题（成为链接），然后添加一些文本。
你能告诉我应该使用哪些JavaScript或jquery函数吗？ />

喜欢：

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


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

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

Answer 1

查看Jquery after()。来自文档：

使用以下HTML：
<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
可以创建内容，然后在几个元素之后插入一旦：
$( ".inner" ).after( "<p>Test</p>" );

Answer 2

您可以使用以下方式使用两个段落标记附加链接和文本说明的简单脚本：

＆＃13;

CREATE DOMAIN tebool AS bool DEFAULT false NOT NULL;
CREATE temp table ztest  ( ztest tebool ) on commit drop ;

CREATE OR REPLACE FUNCTION ztest()
   RETURNS numeric AS $$

DECLARE
r_test tebool = False;
BEGIN

RETURN 0;
END;  $$ language plpgsql;

SELECT ztest();

＆＃13;

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

＆＃13;

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

＆＃13;

如果需要，您可以添加<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <input type="button" value="Add" id="addBtn" />  <ul id="target"></ul>，如下所示，以使其可编辑。

＆＃13;

contenteditable

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: