js有关<JScript>里面的一大坑
在用 innerHtml 与 innerText 进行DOM操作时,请注意以下问题:
解析问题
innerHtml 里面的 html 标签可以被解析,eg:
p.innerHTML = "ABC <span style='color:red'>RED</span> XYZ";
显示结果为:
而 innerText、textContent 中的html标签是不会被解析出来的,会将其理解成为字符串。
更多见:
细述textContent 与 innerText、innerHTML 的区别
标签关系
接下来你将接触一个错误:
var p = document.getElementById('p');
p.innerHtml = '<script'+'>alert(123)</'+'script>';
p.innerHtml = '<script>alert(123)</'+'script>';
p.innerHtml = '<script>alert(123)</script>';
p.innerHtml = '<script>alert(123)'+'</script>';
不管你怎么写,它都是无法执行的,其原因就在于你理解错误了,p表示的是一个id为p的p标签或者其他一些无法包含<script>的html标签,相信说到这儿,大家就应该知道了。
原因就是,你无法在那些元素标签中加入<script>,所以 innerHtml 也一样不能打破规则去实现这一功能。
源代码解觉方案可以用jQuery:
$(‘body’).append(‘<script’+‘>alert(123)</’+‘script>’);
其意思是将<script>迁移到body中去,因为body是可以装<script>的