我试图将一大块HTML插入到div中.我想看看简单的JavaScript方式是否比使用jQuery更快.不幸的是,我忘记了如何以"旧"的方式做到这一点.:P
var test2 = function(){
var cb = function(html){
var t1 = document.getElementById("test2");
var d = document.createElement("div");
d.id ="oiio";
d.innerHtml = html;
t1.appendChild(d);
console.timeEnd("load data with javascript");
};
console.time("load data with javascript");
$.get("test1.html", cb);
}
我在这里做错了什么？
编辑:
有人问哪个更快,jquery或普通js所以我写了一个测试:http:
//jsperf.com/html-insertion-js-vs-jquery
普通js快10%
我正在尝试用纯JavaScript绘制一个SVG矩形.它没有出现.
但是当我document.getElementById('rect1')在浏览器控制台中运行时,矩形元素就存在了.当我将HTML从控制台复制并粘贴到HTML文件中时,矩形会正确显示.因此,似乎正在将正确的代码添加到文档中,但该元素未显示.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<div>
<svg id="test" width="500" height="500">
<!-- code copied from browser console works
<rect x="30" y="60" width="50" height="80" style="stroke:#000000; fill:none;" id="rect1">
</rect> -->
</svg>
<svg id="main" width="500" height="500"></svg>
</div>
<script src="./src/shapes.js"></script>
</body>
</html>
JavaScript的:
function addSvgElement() {
var rect = document.createElement("rect");
rect.setAttribute('x', 30);
rect.setAttribute('y', 60);
rect.setAttribute('width', 50);
rect.setAttribute('height', 80);
rect.setAttribute('style', "stroke:#000000; fill:none;");
rect.id = "rect1";
var svg = document.getElementById('main');
svg.appendChild(rect);
}
addSvgElement(); // adds correct code, but …我正在尝试使用document.createElement('circle')来处理svgs但是Chrome会创建一个结束标记来圈出给定
<circle></circle>
哪个错误的结果.如何创建一个没有结尾的元素？