Fatal编程技术网

Jquery/Javascript创建元素

javascript jquery html dom

Jquery/Javascript创建元素,javascript,jquery,html,dom,Javascript,Jquery,Html,Dom,考虑以下DOM操作问题：我需要在单击某个链接后创建一个span标记。由于进程加快，我更喜欢使用document.createElement（）（纯Javascript）而不是创建HTML元素的Jquery方法。下面的代码编译正确，但不起作用（可能是因为Javascript和Jquery之间存在干扰）。任何帮助都将不胜感激 <body> <a href="#">Create thumbnails</a> <script ty

考虑以下DOM操作问题：我需要在单击某个链接后创建一个span标记。由于进程加快，我更喜欢使用
document.createElement（）
（纯Javascript）而不是创建HTML元素的Jquery方法。下面的代码编译正确，但不起作用（可能是因为Javascript和Jquery之间存在干扰）。任何帮助都将不胜感激

<body>
        <a href="#">Create thumbnails</a>
        <script type="text/javascript">
            $('a').click(function(e) {
                var newSpan=null;
                newSpan = document.createElement('span');
                newSpan.setAttribute('class','themes');
                $('.themes').html('themes');
                $('.themes').appendTo('body');
                return false;
            });
        </script>
    </body>


$（'a'）。单击（函数（e）{
var newSpan=null；
newSpan=document.createElement（'span'）；
setAttribute（'class'，'themes'）；
$（'.themes'）.html（'themes'）；
$（“.themes”）.appendTo（'body'）；
返回false；
});
在jQuery可以使用它之前，您需要将它插入文档中的某个位置。

我认为这是因为jQuery“$”函数正在查找文档正文中已经包含类“主题”的任何内容。它找不到任何内容，因为您只是在之后尝试附加它。

请尝试以下操作：

<body>
    <a href="#">Create thumbnails</a>
    <script type="text/javascript">
        $('a').click(function(e) {
            var newSpan=null;
            newSpan = document.createElement('span');
            newSpan.setAttribute('class','themes');
            $(newSpan).html('themes');
            $(newSpan).appendTo('body');
            return false;
        });
    </script>
</body>


$（'a'）。单击（函数（e）{
var newSpan=null；
newSpan=document.createElement（'span'）；
setAttribute（'class'，'themes'）；
$（newSpan.html（'themes'）；
$（newSpan.appendTo（'body'）；
返回false；
});
使用
$（“.themes”）
作为选择器，将在文档中搜索类为“themes”的元素，而不是函数中的
newSpan
元素。您必须使用
newSpan
作为选择器，直到它附加到文档中

$('.themes').appendTo('body');
在这段代码中，您告诉jQuery找到类“themes”的所有元素并将它们附加到body中，但是为了找到它们，元素需要已经存在于DOM中，而事实似乎并非如此。在使用jQuery查找元素之前，应该创建元素并通过JavaScript将其附加到DOM中

    $('a').click(function(e) {
        var newSpan=null;
        newSpan = document.createElement('span');
        newSpan.setAttribute('class','themes');
        $('body').append(newSpan);
        $('.themes').html('themes');
        e.preventDefault();
    });
演示：

dom中不存在新元素。
将其附加到文档中，然后查看是否有效。
+如果您正在使用jquery，为什么不一直使用它呢

  $('a').click(function(e) {
            $('span')
                .attr('class','themes')
                .html('themes');
                .appendTo('body');
           e.preventDefault();
        });


$（'a'）。单击（函数（e）{
var newSpan=null；
newSpan=document.createElement（'span'）；
setAttribute（'class'，'themes'）；
//无法操纵span.theme，因为span仍然不存在
//$（'.themes'）.html（'themes'）；
//$（“.themes”）.appendTo（'body'）；
//在主体上创建跨度，然后可以对其进行操纵
document.body.appendChild（newSpan）；
$（'.themes'）.html（'themes'）；
返回false；
});
或：


$（'a'）。单击（函数（e）{
$（this.after（'thumb'）；
});
您的代码有几个问题：

  • jQuery选择器找不到文档中不存在的元素
  • getAttribute（）
    和
    setAttribute（）
    在旧版IE中被破坏。请改用
    className
    属性
但是，在这个实例中避免使用jQuery所获得的性能增益将是微乎其微的，除非您在单击处理程序中所做的工作比发布的要多得多。然而，值得一提的是，这里有一些修改后的代码：

$('a').click(function(e) {
    var newSpan = document.createElement('span');
    newSpan.className = 'themes';
    newSpan.innerHTML = 'themes';
    document.body.appendChild(newSpan);
    return false;
});
将刚刚创建的范围包装为jQuery对象，这样即使不将其附加到主体中，也可以对其执行jQuery操作

  <body>
            <a href="#">Create thumbnails</a>
            <script type="text/javascript">
                $('a').click(function(e) {
                    var newSpan=null;
                    newSpan = document.createElement('span');
                    newSpan.setAttribute('class','themes');
                    var jqNewSpan = $(newSpan);
                    jqNewSpan.html('themes');
                    jqNewSpan.appendTo('body');
                    return false;
                });
            </script>
        </body>


$（'a'）。单击（函数（e）{
var newSpan=null；
newSpan=document.createElement（'span'）；
setAttribute（'class'，'themes'）；
var jqNewSpan=$（newSpan）；
jqNewSpan.html（'themes'）；
jqNewSpan.appendTo（'body'）；
返回false；
});
“但不起作用”不是对问题的良好描述。事实上发生了什么？什么不是？有错误吗？Javascript和HTML没有错误compiled@George：FYI
.setAttribute（'class'，'themes'）
可能会在
IE6
中给您带来麻烦。如果您支持的是
IE6
，则可能需要使用
.setAttribute（'className'，'themes'）取而代之。我不会一直使用Jquery，因为我阅读了该文档。createElement（span）比$（'span'）快。好的，也可以用你的方式完成，但我不认为这是一个真正的问题。我认为jquery的速度要慢几毫秒，这并不能真正影响您。这就像您希望使用本机javascript
addEventListener
而不是jquery的
bind
（或者在您的例子中单击
会更快一些），因为它有点快。@George，您是对的，但您是错的：<代码>$（“”）
比本机JS慢，但仍以每秒240000次以上的速度停止。代码的可维护性和可伸缩性比这种微不足道的性能调整要重要得多。为什么不只是用过程性的东西编写代码呢？它比OOP更快。这在旧版IE（兼容模式下为6、7、8）中不起作用，因为
setAttribute（）
在这些浏览器中被破坏。改为使用
newSpan.className='themes'
。最有用的详细信息：“直到它附加到文档中”。非常感谢。

$('a').click(function(e) {
    var newSpan = document.createElement('span');
    newSpan.className = 'themes';
    newSpan.innerHTML = 'themes';
    document.body.appendChild(newSpan);
    return false;
});



  <body>
            <a href="#">Create thumbnails</a>
            <script type="text/javascript">
                $('a').click(function(e) {
                    var newSpan=null;
                    newSpan = document.createElement('span');
                    newSpan.setAttribute('class','themes');
                    var jqNewSpan = $(newSpan);
                    jqNewSpan.html('themes');
                    jqNewSpan.appendTo('body');
                    return false;
                });
            </script>
        </body>