Javascript:小心使用innerHTML

简介:

最近在做AJAX,想用javascript实现DataList功能,遇到一个棘手的问题,由于要生成的HTML很长,所以我写成如下的形式:

list.innerHTML="<table><tr>";

list.innerHTML+="<td>"

......

但是这样生成的innerHTML始终不对,研究了半天,原来是innerHTML搞得鬼.innerHTML自带了语法检查功能,他会自动把不完整的HTML代码补充完整.运行如下的一个测试代码就可以发现了.

document.getElementById("AlbumList").innerHTML="<table><tr>";
alert(document.getElementById("AlbumList").innerHTML);

他会自动把我的代码里面添加了<tbody>和</tr></table>等标记.神奇!!!

那么不让他自动填写的一个办法就是用一个中间变量:

var html="<table><tr>";

html+="<td>";

......

list.innerHTML=html;

就这样就可以解决问题了.

目录
相关文章
|
10月前
|
JavaScript 前端开发 安全
JavaScript DOM 操作:解释一下 `innerHTML` 和 `textContent` 的区别。
JavaScript DOM 操作:解释一下 `innerHTML` 和 `textContent` 的区别。
101 1
|
前端开发 JavaScript
前端基础 - JavaScript之innerHTML方法
前端基础 - JavaScript之innerHTML方法
62 0
|
JavaScript 前端开发
JS DOM innerHTML和innerText
JS DOM innerHTML和innerText 在JavaScript中,我们可以使用innerHTML属性很方便地获取和设置一个元素的“内部元素”,也可以使用innerText属性获取和设置一个元素的“内部文本” 例如,我们用innerHTML来向HTML文档中添加一张图片:
96 1
JS DOM innerHTML和innerText
|
存储 JavaScript 前端开发
JavaScript相关面试题:1.js垃圾回收机制;2.闭包;3.为什么不建议使用innerHTML;4.null和undefined的区别;5.new 操作符
new 操作符的作用是什么? :作用如下。 (1)创建一个空对象。 (2)由this变量引用该对象。 (3)该对象继承该函数的原型(更改原型链的指向)。 (4)把属性和方法加入到this引用的对象中。 (5)新创建的对象由this引用,最后隐式地返回this, 过程如下: var obj={}; obj._proto_=Base.prototype; Base.cail(obj)
323 0
fbh
|
JavaScript
js中写文档write和innerHTML的区别
document.write是直接写入到页面的内容流,如果在写之前没有调用document.open, 浏览器会自动调用open。
fbh
2051 0
|
Web App开发 JavaScript 前端开发
JavaScript 从入门到放弃(一)事件委托和使用innerHTML添加元素
一、使用事件委托 一个简单的需求,比如想给ul下面的li加上点击事件,点击哪个li,就显示那个li的innerHTML。这个貌似很简单!代码如下! DOCTYPE html> 0 1 2 3 4 5 6 7 8 9 var $ul = document.
1366 0
|
JavaScript 前端开发
javascript 中的innerHTML的用法
javascript中innerHtml用法 2009-04-21 22:52 function Test(){        var str="";        str+="He...
1104 0

热门文章

最新文章