JavaScript 用元素附加字符串答案

【问题标题】：JavaScript append string with element(s)JavaScript 用元素附加字符串
【发布时间】：2014-08-18 23:06:31
【问题描述】：

我正在尝试使用越来越多的原生 Javascript 代码来代替 jQuery。如果我想用 jQuery 在另一个分类元素中附加一个带有 html 元素的字符串，这很容易：

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

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

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

FIDDLE

如何使用原生 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);

【问题讨论】：

I'm trying to use more and more native Javascript code in stead of jQuery. 为什么？
第一个示例中的selector 是什么？顺便说一句，要对多个元素执行相同的操作（因为querySelectorAll() 返回一个 HTMLCollection），您需要遍历这些返回的元素。
如果就这么简单，那么就会有 jquery 之类的库。
@Matt Burland 因为它通常更快，并且 svg 操作使用 Javascript 更容易更好。而且我不想创建多个对象来支持 jQuery 和 Javascript 函数。
为什么不使用循环？您正在对一组项目执行转换。即使您最终选择了单线，您认为后面的代码会发生什么？ jQuery 也不使用魔法 (james.padolsey.com/jquery/#v=1.10.2&fn=jQuery.fn.appendTo)

标签： javascript html appendchild selectors-api

【解决方案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);
    }); 
};

但不要这样做that。

改为这样做：

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

appendToNodeList(document.querySelectorAll(".destination"), svg);

【讨论】：