我正在使用AJAX将数据附加到div元素,我从JavaScript填充div,如何将新数据附加到div而不会丢失div中的先前数据？
我曾多次听说过onClick()在HTML 中使用JavaScript事件是一种不好的做法,因为它对语义不利.我想知道缺点是什么以及如何修复以下代码？
<a href="#" onclick="popup('/map/', 300, 300, 'map'); return false;">link</a>
我被告知不要使用element.innerHTML += ...这样的东西来附加东西:
var str = "<div>hello world</div>";
var elm = document.getElementById("targetID");
elm.innerHTML += str; //not a good idea?
这有什么问题？我还有其他选择吗？
我正在尝试找出在浏览器中深度克隆DOM树的最高效方法.
如果我开始
var div = document.getElementById("source");
var markup = div.innerHTML;
什么会更快,
var target = div.cloneNode(true);
要么
var target = document.cloneNode(false);
target.innerHTML = markup;
我知道浏览器平台可能会在这里产生很大的不同,因此任何关于如何在现实世界中进行比较的信息都将受到赞赏.
我想知道是否有一种轻量级方式我可以使用JavaScript或jQuery来嗅出文档中的特定文本字符; 说€并找到这个角色的所有实例.然后!写一个用$替换所有实例的能力.
我找到了这个首发代码片段:
var str = 'test: '';
str = str.replace(/'/g, "'");
实质上; 我想要一个单页文档的解决方案.抓住X的所有实例并使其成为XY.只有文字字符.
我正在研究一个问题,需要为一组~100个元素中的每个元素创建一个复杂的div块.
除了内容之外,每个单独的元素都是相同的,它们看起来(在HTML中)是这样的:
<div class="class0 class1 class3">
<div class="spacer"></div>
<div id="content">content</div>
<div class="spacer"></div>
<div id="content2">content2</div>
<div class="class4">content3</div>
<div class="spacer"></div>
<div id="footer">content3</div>
</div>
我可以:
1)innerHTML使用字符串连接创建所有元素以添加内容.
2)使用createElement,setAttribute并appendChild创建和添加每个div.
选项1获取稍微小一点的文件可供下载,但选项2的渲染速度似乎稍快.
除了表演之外还有一个很好的理由通过一条路线或另一条路线？我应该测试的任何跨浏览器问题/性能问题？
...或者我应该尝试模板和克隆方法？
非常感谢.
我有这个非常简单的演示:
function foo() {
alert('Works!');
}
var inp = document.createElement('input');
inp.onblur = foo;
document.body.appendChild(inp);
见这里: http ://jsfiddle.net/A7aPA/
如你所见,这是有效的.(单击输入,然后单击其他位置,将弹出警报.)
但是,如果我将此行添加到JavaScript代码中:
document.body.innerHTML += '<br>';
然后模糊处理程序停止工作(并没有抛出错误顺便说一句).
见这里: http ://jsfiddle.net/A7aPA/1/
这是为什么？
我在sql表中有一些数据.我通过JSON将它发送到我的JavaScript.
从那里我需要将它组成HTML,以便通过2种方式之一向用户显示.
以下两个问题都没有给出可量化的答案.
从第一个链接的第一个答案,第三个原因(前两个原因不适用于我的环境)
在某些情况下会更快
有人可以建立一个基础案例,当时createElement()方法更快,为什么？
通过这种方式,人们可以根据自己的环境做出有根据的猜测.
在我的情况下,我不担心保留现有的DOM结构或事件监听器.只是效率(速度).
我没有使用关于我提供的第二个链接的库.但它可以为那些人.
研究/链接
现在Facebook要我把这个丑陋的div放在我页面的顶部 <body>
<div id="fb-root"></div>
我希望避免这种情况,通过JavaScript附加它.
.append('<div id="fb-root"></div>');
这将它放在页面的底部.
</head>
<body>
<header>test</header>
<div id="fb-root"></div>
</body>
我如何'追加'到顶部？
</head>
<body>
<div id="fb-root"></div>
<header>test</header>
</body>
我正在使用JavaScript创建复选框,将onchange侦听器添加到它们并使用循环将它们添加到div.但是,只有最后一个复选框才会注册事件侦听器.
为什么会这样？
var div = document.getElementById("mydiv");
for (var i = 0; i < 5; i++) {
div.innerHTML += ("<br>" + i);
var input = document.createElement("input");
input.type = "checkbox";
input.onchange = function() {
alert("foo");
};
div.appendChild(input);
}<div id="mydiv"></div>javascript ×10
dom ×3
html ×3
innerhtml ×2
jquery ×2
browser ×1
dhtml ×1
dom-events ×1
for-loop ×1