Question

我正在尝试做一个简单的程序，用户可以在其中填写输入文本并选择图像（网址或本地）并在下面显示所选信息。我使用现有的div来制作它，但是如果我们不知道用户将插入信息的次数，则不可能这样做。

因此，如何创建div并在其中插入内容？

User:
<div>
  <input type="text" id="user">Add image
  <form id="image">
        <input type="radio" name="radio" value="url">URL
        <input type="radio" name="radio" value="local">PC
  </form>
  <input type="text" id="url" style="display:none">
  <input type="file" id="local" style="display:none">
  <br>
  <button id="submit">Submit</button>
  <div id="enter"></div>
  <p id="p1"></p>
</div>

jQuery的：

 $(document).ready(function () {
    $('#image input').on('change', function () {
        if ($('input[name=radio]:checked', '#image').val() == "url") {
            $("#url").css('display', 'block');
            $("#local").css('display', 'none');
        } else if ($('input[name=radio]:checked', '#image').val() == "local") {
            $("#url").css('display', 'none');
            $("#local").css('display', 'block');
        }
    });

    $("#submit").click(function () {
        $("#p1").text($("#user").val());
if($("#url").css('display', 'none')==true){
$("#enter").append("img").prop("src", file.val());
}else{
$("#enter").append("img").prop("src", url.val());
}
    });
});

Answer 1

也许试试这个：

$("#enter").append("<img src='" + $("#url").val() + "'>");

Plunker example

Answer 2

jQuery为您提供了许多创建元素的方法。您可以使用$.fn选择器创建它：

$("<div>", {
    class: "Your custom classes",
    id: "random",
    style: "border: none",
    anyAttribute: "itsValue"
}).addClass("itsChainable")
.html("<a href=\"nowhere.com\">Im a link!!</a>")
.appendTo("body")

如果您有更多疑问，请回复！：）

jQuery：创建一个div并在里面插入元素

2 个答案: