Блог

Главная - Вопросы по программированию - JavaScript добавляет строку с элементами

JavaScript добавляет строку с элементами

#javascript #html #appendchild #selectors-api

#javascript #HTML #appendchild #селекторы-api

Вопрос:

Я пытаюсь использовать все больше и больше собственного кода Javascript вместо jQuery. Если я хочу добавить строку с элементами html в другие классифицированные элементы с помощью jQuery, это очень просто:

 <div class='destination'></div>
<div class='destination'></div>

var selector = "class='svg_element'";
var svgElement = "<svg "   selector   " ></svg>";

$(".destination").append(svgElement);

СКРИПКА

Как я могу сделать это с помощью короткого кода на родном JavaScript (без использования цикла)?

Я много пробовал, например, мои просто мысли:

 document.querySelectorAll(".destination").appendChild(svgElement);

Может быть, что-то с созданием элемента в первую очередь:

var svg = document.createElement(«svg»);

 //works
document.querySelector(".destination").appendChild(svg);

//doesn't works
document.querySelectorAll(".destination").appendChild(svg);

Комментарии:

1. I'm trying to use more and more native Javascript code in stead of jQuery. Почему?

2. Что selector в вашем первом примере? Кстати, чтобы сделать то же самое с несколькими элементами (как querySelectorAll() возвращает HTMLCollection), вам нужно выполнить итерацию по этим возвращенным элементам.

3. Если бы это было так просто, тогда были бы библиотеки, подобные jquery.

4. @Matt Burland Потому что это часто быстрее, а манипуляции с svg работают проще и лучше с Javascript. И я не хочу создавать несколько объектов для поддержки функций jQuery и Javascript.

5. Почему без использования цикла? Вы выполняете преобразование для коллекции элементов. Даже если вы попали в однострочный текст, как вы думаете, что происходит в коде? jQuery также не использует колдовство ( james.padolsey.com/jquery/#v=1.10.2amp;fn=jQuery.fn.appendTo )

Ответ №1:

 Array.prototype.forEach.call( document.querySelectorAll(".destination"),
    function (node) { node.appendChild(svg); }
);

Теперь сохраните это на потом:

 NodeList.prototype.append = function (child) {
    Array.prototype.forEach.call(this, function (parent) {
        parent.appendChild(child);
    }); 
};

Но не делайте этого.

Сделайте это вместо:

 var appendToNodeList = function (nodelist, child) {
    Array.prototype.forEach.call(nodelist, function (parent) {
        parent.appendChild(child);
    }); 
};

appendToNodeList(document.querySelectorAll(".destination"), svg);
Метки: