JQuery $('<div></div>') doesn't crea

JQuery $('<div></div>') doesn't create proper div element

本文关键字：div gt lt doesn crea JQuery      更新时间：2023-09-26
')没有'

我有以下js代码:

$(document).ready(function() {
    $(".button").bind("click", function() {
        var div = $('<div></div>');
        $(".label").append(div);
        div.html($(".textField").val());
        console.log(div);
    });
});
与html: 

<input type="text" class="textField"/>
<input type="button" class="button" value=" &gt;&gt;"/>
<div class="label" style="color: red;"></div>

当我点击按钮时，什么都没有发生。控制台输出显示创建的div不是一个合适的div对象。
但是，当我将onclick函数处理程序代码复制到浏览器控制台并运行它时，它可以正常工作。
这是jsFiddle。
这里出了什么问题?

改变代码
JQuery 

$(document).ready(function() {
            $(".button").on("click", function() {
                var div = "<div class='id-of-div'></div>"; //changes
                $(".label").append(div);
                div.html($(".textField").val());
                console.log(div);
            });
        });

HTML 

<input type="text" class="textField"/>
    <input type="button" class="button" value=" &gt;&gt;"/>
<div class="label" style="color: red;"></div>

I Think, This is helpful

您的代码依赖关系或结构可能有问题，因为这似乎正在工作。下面是运行在codepen上的代码:http://codepen.io/chriteixeira/pen/qNvoPN

关于日志对象不是一个合适的html，也许您正在比较浏览器控制台而不是日志控制台中的普通输出。为了确保比较的是相同的数据，您应该运行以下命令:

var $div = $('<div></div>');
console.log($div);

像这样运行，结果应该与codependency的示例相同。

直接使用.click() event

$(document).ready(function () {
   $(".button").click(function () {
      var div = $('<div></div>');
      $(".label").append(div);
      div.html($(".textField").val());
      console.log((div));
    });
});
相关文章：