Jquery / Javascript создать элемент - PullRequest
Новая
       2

Jquery / Javascript создать элемент

0 голосов
/ 23 августа 2011

Рассмотрим следующую проблему манипуляции с DOM: мне нужно создать тег span после нажатия на какую-нибудь ссылку.Из-за ускорения процесса я предпочитаю использовать document.createElement() (чистый Javascript) вместо методов Jquery для создания элементов HTML.Следующий код компилируется правильно, но не работает (возможно, из-за вмешательства между 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>

Ответы [ 9 ]

3 голосов
/ 23 августа 2011

Попробуйте следующее: 

<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>

Использование $(".themes") в качестве селектора приведет к поиску в документе элементов с классом "theme", а не элемента newSpan в вашей функции. Вы должны использовать newSpan в качестве селектора, пока он не будет добавлен в ваш документ.

2 голосов
/ 23 августа 2011

Я считаю, что это потому, что функция jQuery "$" ищет все, что содержит класс 'themes', который уже находится в теле вашего документа.Он ничего не находит, потому что вы пытаетесь добавить его потом.

2 голосов
/ 23 августа 2011

Вам нужно вставить его в документ где-нибудь, прежде чем jQuery сможет что-либо с ним сделать.

1 голос
/ 23 августа 2011

Оберните созданный вами диапазон как объект 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>
1 голос
/ 23 августа 2011

Пара проблем с вашим кодом:

  • Селектор 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;
});
1 голос
/ 23 августа 2011 
<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');

//You can't manipulate span.theme because span does still not exist 
//$('.themes').html('themes');
//$('.themes').appendTo('body');

//Create span on the body and then you can manipulate it
document.body.appendChild(newSpan);
$('.themes').html('themes');
return false;
});
</script>
</body>

Или: 

<body>
<a href="#">Create thumbnails</a>
<script type="text/javascript">
$('a').click(function(e) {
$(this).after('<span class="themes">thumb</span>');
});
</script>
</body>
1 голос
/ 23 августа 2011

Новый элемент отсутствует в дом.
Добавьте его в документ, а затем посмотрите, работает ли он.
+ если вы используете jquery, почему бы не использовать его полностью? 

  $('a').click(function(e) {
            $('span')
                .attr('class','themes')
                .html('themes');
                .appendTo('body');
           e.preventDefault();
        });
1 голос
/ 23 августа 2011 
    $('a').click(function(e) {
        var newSpan=null;
        newSpan = document.createElement('span');
        newSpan.setAttribute('class','themes');
        $('body').append(newSpan);
        $('.themes').html('themes');
        e.preventDefault();
    });

Демо: http://jsfiddle.net/AlienWebguy/a5VEa/

1 голос
/ 23 августа 2011 
$('.themes').appendTo('body');

С помощью этого кода вы сообщаете jQuery найти все элементы класса 'themes' и добавить их в тело, но чтобы найти их, элементы должны уже присутствовать в DOM, что, по-видимому, недело.Вы должны создать элемент и добавить его в DOM через JavaScript, прежде чем использовать jQuery для их поиска.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...