Gar*_*hby 63 html javascript dynamic
我在一些帖子中看到人们document.write()在编写动态HTML时不满意使用javascript.
为什么是这样？什么是正确的方法？
Ric*_*cky 46
document.write()只有在最初解析页面并创建DOM时才会起作用.一旦浏览器到达结束</body>标记并且DOM准备就绪,您就不document.write()能再使用了.
我不会说使用document.write()是正确的还是不正确的,这取决于你的情况.在某些情况下,您只需要document.write()完成任务.看看Google分析如何被注入大多数网站.
在DOM准备好之后,您有两种方法来插入动态HTML(假设我们要插入新的HTML <div id="node-id"></div>):
在节点上使用innerHTML:
var node = document.getElementById('node-id');
node.innerHTML('<p>some dynamic html</p>');
使用DOM方法:
var node = document.getElementById('node-id');
var newNode = document.createElement('p');
newNode.appendChild(document.createTextNode('some dynamic html'));
node.appendChild(newNode);
使用DOM API方法可能是做事的纯粹方式,但innerHTML事实证明它更快,并且在JavaScript库(如jQuery)中使用.
注:在<script>将要成为你的内部<body>标记这个工作.
Tom*_*Tom 27
document.write()不适用于XHTML.它在页面加载完成后执行,并且只写出一串HTML.
由于HTML的实际内存表示是DOM,更新给定页面的最佳方法是直接操作DOM.
您要这样做的方式是以编程方式创建节点,然后将它们附加到DOM中的现有位置.对于[人为的]示例,假设我有一个div元素维护ID"header" 的属性,那么我可以通过这样做来引入一些动态文本:
// create my text
var sHeader = document.createTextNode('Hello world!');
// create an element for the text and append it
var spanHeader = document.createElement('span');
spanHeader.appendChild(sHeader);
// grab a reference to the div header
var divHeader = document.getElementById('header');
// append the new element to the header
divHeader.appendChild(spanHeader);
Nyl*_*ska 10
也许一个好主意是在这种情况下使用jQuery.它提供了方便的功能,你可以做这样的事情:
$('div').html('<b>Test</b>');
有关更多信息,请查看http://docs.jquery.com/Attributes/html#val.
Tom方法概述了DOM方法.
innerHTML,如iHunger所述.
DOM方法比设置属性和内容的字符串更受欢迎.如果您发现自己在写作,innerHTML= '<a href="'+path+'">'+text+'</a>'那么实际上是在客户端创建了新的跨站点脚本安全漏洞,如果您花费任何时间保护服务器端,那就有点难过了.
与innerHTML相比,DOM方法传统上被描述为"慢".但这并非真正的全部故事.什么是缓慢的插入很多子节点:
for (var i= 0; i<1000; i++)
div.parentNode.insertBefore(document.createElement('div'), div);
这转化为DOM在其节点列表中找到正确位置以插入元素,移动其他子节点,插入新节点,更新指针等等的大量工作.
另一方面,设置现有属性的值或文本节点的数据非常快; 你只需更改一个字符串指针就可以了.这比使用innerHTML对父级进行序列化,更改它并将其解析回来要快得多(并且不会丢失不可重复的数据,如事件处理程序,JS引用和表单值).
有一些技术可以在没有太慢的childNodes行走的情况下进行DOM操作.特别要注意的可能性cloneNode和使用方法DocumentFragment.但有时innerHTML确实更快.您仍然可以通过使用innerHTML编写基本结构,使用属性值和文本内容的占位符来获得两全其美,然后使用DOM填充.这样可以省去编写自己的escapehtml()函数以解决上面提到的转义/安全问题.
| 归档时间： |
|
| 查看次数： |
108419 次 |
| 最近记录： |