Question

我正在创建一个小型Web应用程序，允许用户通过单击“添加”按钮向页面添加便签。以下是构成便签的html。

<div class="sticky_note">
    <div class="title">
      <input type="text" name="title" placeholder="My Title"><span class="close">x</span>
    </div>
    <div class="content">
      <textarea name="note" placeholder="Type here..."></textarea>
    </div>
</div>

我只是不确定如何在每次用户点击添加时添加另一个便笺。任何帮助，将不胜感激。谢谢！

Answer 1

您可以使用

轻松创建新的div

document.createElement("div")

你可以添加文字，课程..只需查看w3school了解更多详情..

此外，我看到了您的要求，单击按钮将创建一个便利贴..

Element.cloneNode（）

可能对你有所帮助..你用所有的设计和结构制作一次div并再次使用它..

http://www.w3schools.com/jsref/met_node_clonenode.asp

Answer 2

您可以通过按下按钮生成html元素，例如：

var div = document.createElement('div');
div.id = 'window'; //you can assign property to your element.

var div2 = document.createElement('div');
div2.id = 'windowhead';
div.appendChild(div2);
document.body.appendChild(div);

此代码将div附加到另一个主容器中。我希望这可以有所帮助。

Answer 3

假设所有这些都在主容器中，只需将var code=<div class="sticky_note">...</div>代码保留在字符串中并使用

$("container").append(code);

Answer 4

＆＃13;

package controllers.api.protocol;

import com.avaje.ebean.Model;
import play.mvc.Controller;
import java.util.List;
import play.mvc.*;
import static play.libs.Json.toJson;

public class Period extends Controller {

    public static Result getAll() {
        List<model.Protocol.Period> periods = new Model.Finder<Integer.class>(model.Protocol.Period.class).all();
        return ok(toJson(periods));
    }
}

＆＃13;

var stickyNote = $('.sticky_note')[0].outerHTML;
$('#addBtn').click(function(){
  $stickyNote = $(stickyNote);
  $stickyNote.appendTo($('.sticky_notes_container'))
})

＆＃13;

按钮单击时添加新的自定义div

4 个答案: