为了账号安全，请及时绑定邮箱和手机立即绑定

关于js拼接html元素？

首页 猿问 关于js拼接html元素？

关于js拼接html元素？

JavaScript
鸿蒙传说 2019-05-24 09:55:58
小明888888小明上学校，天天不迟到！这一段代码用js应该如何拼接呢？（数据是从json里面获得，我想拼接到前端页面）
查看完整描述

2 回答

?
慕标5832272

TA贡献1966条经验 获得超4个赞

你的意思是小明和888888这样的学号都是从数据中来的？然后要展现到前端页面中其实有很多方法：一.直接全HTML拼接（你可能想到的方法）
//假设有name和xueID分别代表名字和学号的变量
varHTMLbank='`+
`
`+
``+
``+name+`
`+
``+xueID+`
`+
``+
name+`上学校，天天不迟到！`+
`
`+
`
`+
`
`
然后把HTMLbank这样的拼接结果输出到页面中合适位置。如果有多段要拼接，就需要把上一段包装到一个函数中，这样可以通过调用函数一下就获得拼接结果，减少编码，例如
functionPJHTMLren(name,xueID){
varHTMLbank='`+
`
`+
``+
``+name+`
`+
``+xueID+`
`+
``+
name+`上学校，天天不迟到！`+
`
`+
`
`+
`
`
returnHTMLbank
}
二、采用局部刷新来做比如在页面中已经有了
上学校，天天不迟到！
然后有了name和xueID，就可以通过DOM定位id的方法确定到具体的文档元素，然后用实际值去更新来刷新页面达到效果，这里就是查找id为_xm和gc_name的元素，其text内容变成name变量的值，查找id为xhID的元素，其text值用xueID变量值来替换。
三、如果你用了页面模板技术等，还可以根据其模板技术实现方便的内容组装展示，比如利用vue等等的技术来实现。
                            
                            
查看完整回答

                        
                        

                            
                            
                            反对
                            回复

                                                                                                                2019-05-24
                        

                                                

                            
    
                                                            

                                                        
                        

                    
                
                                

                                        
                        ?
                    
                    

                        

                            SMILET
                            
TA贡献1796条经验 获得超4个赞

                                                                                    

                                
varhtml=""+
""+
""+
"
"+
""+
""+data.xm+"
"+
""+data.xuehao+"
"+
""+data.gc+"
"+
"
"+
"
"
还有个跟简单的，你不考虑兼容或者有用构建工具可以直接用这个
lethtml=`
${data.xm}
${data.xh}
${data.gc}
`
                            
                            
查看完整回答

                        
                        

                            
                            
                            反对
                            回复

                                                                                                                2019-05-24
                        

                                                

                            
    
                                                            

                                                        
                        

                    
                
                            
                                
    

    

        

            
    
                
  • 
                    2
                    回答
                
    • 
                
  • 
                    0
                    关注
                
    • 
                
  • 
                    606
                    浏览
                
    • 
            

                        
                
            
                        

                
                

                                    

            

        

        
        

        
        
        
                

        
                    

                
慕课专栏

                更多
                
            
 
                
        

            
        

        
    







    
添加回答

    
    












	

		
举报

		
	

	

		

		  	

			

			

		

	

	

		
		
0/150

	

	

		
提交

		
取消