关于innerHtml()插入的代码样式失效

最新推荐文章于 2024-03-05 14:37:18 发布
原创 最新推荐文章于 2024-03-05 14:37:18 发布 · 5.7k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
标签
#JS #BootStrap
在使用BootStrap框架开发手机适配HTML页面时，遇到通过JavaScript的innerHTML方法动态插入的表格样式失效问题。内容是根据用户输入通过AJAX获取数据，并追加到页面中。发现追加的class="success"未生效，导致表格样式错乱。解决方法是改用jQuery的html()方法，成功避免了innerHTML导致的样式问题，同时也修复了之前遇到的相似BUG。

          最近公司要求研发一个手机适应的HTML页面，所以采用了BootStrap框架，页面很简单，就是根据用户输入的四个值，发送AJAX请求，去调用webservice接口得到json数据，把数据通过.innerHTML方法追加到id为neirong的div中，作为一个表格显示在下方，其中表格也是需要带class属性，带有BootStrap的样式。

 <!DOCTYPE html>
<html>
	<head>  
	
		<link href="css/bootstrap.min.css" rel="stylesheet"/>
		<script src="js/jquery-3.2.1.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<meta charset="utf-8" />
		   <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
		<title>信息查询</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			#all{
				padding-top: 30px;
				width: 80%;
				margin: auto;
			
			}
			#gonggao{
				padding: 10px;
				border: solid 0px gainsboro;
				border-radius: 10px;
			}
			#tupian{
			margin-top:10px;
				text-align:center;
				
			}
			#gonggao p{
				padding-left: 20px;
			}
			#neirong{
				margin-top: 20px;
				padding: 10px 45px 10px 15px;
				border: solid 0px gainsboro;
				border-radius: 10px;
			}
			#neirong button{
				margin: 5px 20px;
			}
			#buttom{
				text-align: center;
				padding: 10px;
				margin-top: 20px;
				height: 60px;
			white-space:nowrap;  
			}
			a{
				
				padding-left: 2%;
			}
		</style>
	</head>
	
	<body>
		<div id="all">
		<div id="gonggao">
		
		<form class="form-horizontal">
		
  <div class="form-group">
    <label  class="col-sm-2 control-label" >ck:</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" placeholder="请输入ck" id="ckid" name="ck" >
    </div>
  </div>
  
  <div class="form-group">
    <label class="col-sm-2 control-label">cw:</label>
    <div class="col-sm-10">
   	<input type="text" class="form-control" placeholder="请输入cw" id="cwid" name="cw" >
    </div>
  </div>
  
  
    <div class="form-group">
    <label  class="col-sm-2 control-label">cp:</label>
    <div class="col-sm-10">
   	<input type="text" class="form-control" placeholder="请输入cp" id="cpid" name="cp" >
    </div>
  </div>
  
  
    <div class="form-group">
    <label class="col-sm-2 control-label">pc:</label>
    <div class="col-sm-10">
		<input type="text" class="form-control" placeholder="请输入pc" id="pcid" name="pc" >
    </div>
  </div>
  
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="button" class="btn  btn-primary btn-block btn-lg" onclick="getMessage()">查询</button>
    </div>
  </div>
</form>
		</div>
	</div>
		
			<div id="neirong">
				<!-- 要追加的数据放在此处 -->
		

			</div>
	
		</div>
		


		<script type="text/javascript">
		//定义样式数组
		var arr1 = ["success","warning","danger","active","info"];
		var xmlHttp;

			function createXMLHttpRequest() {					
		  		  if (window.ActiveXObject) {
		     		   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
				//  alert("创建ActiveXObject");
		   		 } 
					    else if (window.XMLHttpRequest) {
					        xmlHttp = new XMLHttpRequest();
					//alert("创建XMLHttpRequest");
					    }
					}
			
			function createXml(str){ 
				　　if(document.all){ 
				　　var xmlDom=new ActiveXObject("Microsoft.XMLDOM") 
				　　xmlDom.loadXML(str) 
				　　return xmlDom 
				　　} 
				　　else {
				　　return new DOMParser().parseFromString(str, "text/xml") 
				　　} 
				}
			//把字符串转变为json对象
			function strToJson(str){ 
				   var json = eval('(' + str + ')'); 
				    return json; 
			} 
			
			

			function getMessage(){
				
				 var url1 = 'http://4**********.com.cn/******/services/I********ve?wsdl';   //为保护隐私，wsdl链接不显示。
						 
						//将取出的值，传入参数
					var ck=document.getElementById("ckid").value;
				if(ck==""||ck==null){
					alert("ck未输入！");
					return ;
				}

					var cw=document.getElementById("cwid").value;
					var cp=document.getElementById("cpid").value;
					var pc=document.getElementById("pcid").value;

					var soap1 = '<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:stoc="http://*****.*****.****.com/"><soapenv:Header/>  <soapenv:Body>      <stoc:*****>         <!--Optional:-->         <arg0>{"pc":"'+pc+'","cw":"'+cw+'","ck":"'+ck+'","operatorid":"11111","cp":"'+cp+'"}</arg0>         <!--Optional:-->         <arg1>?</arg1>      </stoc:******> </soapenv:Body></soapenv:Envelope>';
						
						
							createXMLHttpRequest();
					//		alert(xmlHttp);
					//	alert("创建："+url1+"数据:"+soap1);
						 xmlHttp.onreadystatechange = showResponseProdu;

						 xmlHttp.open("POST", url1, true);
						 xmlHttp.send(soap1);
						//alert("send OK");

			}
			
			

			function showResponseProdu(){
					var code1 = xmlHttp.responseText;
				//	alert(code1);
					//将得到的返回结果修改编码
					var ret1=	unescape(code1.replace(/&#x/g, '%u').replace(/;/g, ''));	
					//alert(ret1);
					//将修改后的xml字符串变成xml对象
					var xmlDomss1=	createXml(ret1); 
					
					//取出xml对象中 return元素的值
					var xmlName1=xmlDomss1.getElementsByTagName("return")[0].childNodes[0].nodeValue;
					
				//把return元素的值转变为json格式
					var obj11 =strToJson(xmlName1);
					//对json格式取名字，信息，状态
					//alert(xmlName1);
					//document.getElementById("productoInfodd").innerText=xmlName1;
					if(obj11.status==null){
					alert("系统异常！");
					}
					
					
					var statuss1=obj11.status;

					if(statuss1=="0"){
							

				{
                             var str1='	<table class="table table-hover table-bordered"  id="productoInfodd">	<tr class="active">			<td>CP</td>			<td>CPNAME</td>			<td>PC</td>			<td>CCLX</td>			<td>CW</td>			<td>GG</td>			<td>ZSL</td>			<td>KYS</td>		</tr>';
                             var array = eval(obj11.jsarrayposdtl) ;
                                for (var i=0;i<array.length;i++){
									 var ssst=array[i];
								 var one=ssst;
								 var dtlarray=eval(one.showbyCP);
                                    for(var j=0 ;j<dtlarray.length;j++){
                                       var dtlone=dtlarray[i];
                                    
			str1+=' <tr class="'+arr1[j]+'">	<td>'+one.cp+'</td>	<td>'+one.cpname+'</td>	<td>'+dtlone.pc+'</td>	<td>'+dtlone.cclx+'</td><td>'+dtlone.cw+'</td>			<td>'+dtlone.gg+'</td>			<td>'+dtlone.zsl+'</td>			<td>'+dtlone.kys+'</td>	</tr>  ';  
										
								   }

                                }
							$("#neirong").html(str1+"</table>");
					
								
                         }
					}else{
						var messages=obj11.message;
						alert("错误！"+messages);
					}
				}
		</script>

	</body>
		
</html>

        在追加str1的时候，一开始neirong的div是这样的，我想把得到的数据 str1+=’ ‘+one.cp+’ ‘+one.cpname+’ ‘+dtlone.pc+’ ‘+dtlone.cclx+’’+dtlone.cw+’ ‘+dtlone.gg+’ ‘+dtlone.zsl+’ ‘+dtlone.kys+’ '; 作为tr使用innerHTML写到< span id=“addTable”>中去，但是追加之后，发现其中带的class="success"是没有起作用的。然后它所在的表格也和上面的不对应。

<div id="neirong">
			<table class="table table-hover table-bordered" >
			
		<tr class="active">
			<td>CP</td>
			<td>CPNAME</td>
			<td>PC</td>
			<td>CCLX</td>
			<td>CW</td>
			<td>GG</td>
			<td>ZSL</td>
			<td>KYS</td>
		</tr>
	<span id="addTable">
	</span>
		
</table>
			</div>

谷歌浏览器跑出来的是

<div id="neirong">
			<table class="table table-hover table-bordered" >
			
		<tr class="active">
			<td>CP</td>
			<td>CPNAME</td>
			<td>PC</td>
			<td>CCLX</td>
			<td>CW</td>
			<td>GG</td>
			<td>ZSL</td>
			<td>KYS</td>
		</tr>
	<span id="addTable">
		<tr class="active">
			<td>CP</td>
			<td>CPNAME</td>
			<td>PC</td>
			<td>CCLX</td>
			<td>CW</td>
			<td>GG</td>
			<td>ZSL</td>
			<td>KYS</td>
			</tr>
	</span>
		
</table>
			</div>

这样的 代码是没有表格的。所以最好的解决办法就是，把整个table都作为字符串写到div里面。此处使用的是jquery的html()方法，使用innerHTML方法出现无样式的问题。

同理，应该也解决了我之前遇到的一个问题，可以选择时间修改之前遇到的BUG
之前的 https://blog.csdn.net/qq8693/article/details/81562257

qq8693
关注
腾讯云COS对象存储保姆级配置指南：从创建存储桶到设置访问权限，一篇搞定
weixin_33749242的博客
05-14 496
本文提供腾讯云COS对象存储的全面配置指南，涵盖存储桶创建、访问权限设置、高级功能配置及成本优化策略。通过实战案例和详细步骤，帮助用户快速掌握COS的核心配置技巧，提升数据存储效率与安全性，特别适合企业级用户和开发者参考。
前端项目使用innerHtml时，部分样式失效问题
狂奔的蜗牛
05-21 2229
1、现象： 在编辑器中，设置文字颜色，使之在前端突出显示。 2、实际效果： 可以发现想要的颜色并没有展示出来。 3、解决方法： 创建一个模块： 在需要使用的模块导入创建的模块： 页面调用： ...
解决innerHTML时JS不生效
no..no,water colset!
12-12 7422
写了一个简单的函数..作用是解决innerHTML时JS不生效..基于网上某个类修改... 兼容ie6+..Firefox..其它未测! function set_innerHTML(el, htmlCode) { var ua = navigator.userAgent.toLowerCase(); if (ua.indexOf('msie') >= 0 &
innerHTML写入元素后添加方法
qizi_的博客
03-30 866
当需要动态插入元素时,插入的元素往往添加class样式于onclick方法失效. 这种情况是因为插入之前class与js代码已被读取 所以这里就解决方案原理是插入元素的同时给予它添加点击事件与内联样式 vessel.innerHTML = "<video style='width: 100%;height: 100%;background: #31313180;' class='camera-play'></video>"; document.querySelectorAll
Js(四)：input文本框 innerHtml 或 innerText 赋值不生效问题
weixin_41297324的博客
08-11 9973
上周的任务项目中有一个小需求，在后端接收到数据后需要将进行可视化显示后，需要对显示的数据进行一个人性化的操作：点击句子自动跳转。本想着这个需求分分钟可以搞定，然而还是踩了一会的坑。 如点击“标注例句1”后，自动进行关闭当前模态框，然后将参数数据传递至如下的文本框。 前端HTML： <div class="row"> <div class="col-xs-12"> <input type="text" placeho
关于使用innerHTML属性插入大量代码(有换行)
qq_43634202的博客
07-27 3911
问题环境: 由于想创建一个能够自适应窗口的网站,所以想着html结构能够动态改变,因为需要大刀阔斧的改动,所以选择了innerHTml,然而在使用过程中却出现了问题 代码: html源代码: <div id="plat_container_1"> </div> 预想插入后的代码: <div id="plat_container_1"> <div cla...
Angular中innerHTML标签的样式不起作用详解
weixin_30664615的博客
06-17 733
1.背景 在最近angular的项目中,需要用到[innerHTML]标签来指定一个div的样式： 1 //HTML部分 2 <div class="contents" [innerHTML]="contents"></div> 3 4 //TS部分 5 contents = '<p>商品信息栏位<br><...
angular ts中写html,Angular中innerHTML标签的样式不起作用的原因解析
weixin_42524226的博客
06-02 951
1.背景在最近angular的项目中,需要用到[innerHTML]标签来指定一个div的样式：//HTML部分//TS部分contents = '商品信息栏位商品信息介绍';但是上面的样式并不起作用，在Chorme中查看源码，发现style标签的样式在Angular编译的时候被屏蔽掉。这是为什么呢？客观别急，请往下看。2.解决方案先说解决方案，最后再分析出现这种问题的原因。修改上面的TS：// ...
angular2/4 使用[innerHTML]时样式不生效
m0_45406092的博客
06-06 1642
首先默认情况下，innerHTML会被认为是不安全的，因此屏蔽掉了样式。 不生效场景 我们通过innerHTML引入一段html格式的文本，文本中有style样式，目标是希望字体是红色的，而实际效果却仍然是默认的黑色。 TS文件 import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-inner-html', templateUrl: './inner-html.component.html',
html中.inner样式,关于通过innerHTML插入样式的问题
weixin_39834745的博客
06-11 1286
在js代码中，通过innerHTML加入一段页面，代码如下：运行后，发现在ie下，页面style中的样式没有被解析，页面展现不对，而在ff下展现正常。 请教了高手，再阅读 http://www.gold98.net/article.asp?id=897，发现原来在使用innerHTML或insertAdjacentHTML的时候，如果插入的html代码的开头有noscope元素(包括script,...
JS 中innerHTML 加载完后没有css样式
Sun_xiangyan的博客
11-07 3473
// 加载完后,a可能无法点击,或者设置的class会失效. 解决方案如下: // 重新渲染格式[div同理,如div不行,可以放到span里面试一下] $.parser.parse("#content"); $('#attr-tree').tree({ onClick: function (node) { //var subNodes = getSubChild...
html嵌入html css无效,[转]解读DIVCSS网页布局中CSS无效十个原因_html/css_WEB-ITnose
weixin_39629989的博客
06-03 763
我们从51cto.com中学习DIV CSS网页布局的知识，可是W3Cvalidation有时难以操作，但用它你可以查看由版面设计引起的差错。验证程序抛出大量差错和警告，说明你的 XHTML尚未完善，可能无法在不同浏览器上保持一致功能。下面十个细微的失效问题难住了大批程序员，本文就告诉你如何解决。在本文开始前介绍一些使用 W3C验证程序时需要注意的问题。1、不要担心验证程序的警告：如果验证程序说发...
使用innerHTML插入元素设置class不生效
larea的博客
03-05 1283
在 js 中通过 .innerHTML 添加元素到页面中元素可以渲染到页面中，并且控制台中可以看到 class ，但样式不生效。
WEB基础之innerHTML添加标签后class触发js的问题
街角有人祝福,巷口有人哭~
06-22 1312
先说下事件绑定：可以了解一下比较新的jQuery版本中的的on方法，基本上可以取代之前习惯用的事件绑定的方法了。然后用下面这样的方法就可以给动态添加的dom绑定事件了，思路就是将新生成的元素类的事件委托给一开始就存在的父容器进行处理。假设动态插入的div类名是.child,他们的父容器id是#parent $("#parent").on('click','.child',function(){}
JS属性样式和事件
a83491的博客
06-28 383
无
HTML页面引入ElementUI库时样式失效的解决方法（亲测可行）
k912120的博客
06-07 6490
HTML页面引入ElementUI库时样式失效的解决方法（亲测可行）
angular使用[innerHTML]时样式不生效
qq_15509267的博客
07-08 4068
一、问题描述 使用[innerHTML]向angular的模板中添加模板时，被添加模板中的css样式不生效。 二、详细介绍 【1】需要根据数据模型动态创建表格的表头（部分代码如下）： //模板 .../ <td [innerHTML]="col.render?col.render(item[col.key],col.key,i,item):item[col.key]">&l...
IE中，select.innerHTML无法生效的解决办法
yyjiang21的博客
01-04 516
有天遇到select动态生成options,页面部分代码如下: [code="java"] [/code] 在FF、chrome均可以使用 [code="java"]$("#act_move_target").innerHTML = ${folderSelectHTML}[/code] 到了IE就不行了，据说是IE的BUG.上网查了一下，其中一种解决...
DOM(innerHTML和className)
qq_36910110的博客
11-01 531
InnerHTML 语法：ele.innerHTML 功能：返回ele元素开始和结束标签之间的HTML 语法：ele.innerHTML=”html” 功能：设置ele元素开始和结束标签之间的HTML内容为html1、ele.innerHTML<body> <div class = "box" id = "box"> 元素 </div> <ul id = "list">
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值