innerHTML中标签可以换行的方法汇总

2024-05-06 16:24:30

字体：大中小

来源：转载

供稿：网友

本文给大家分享的是一个在javascript中使用innerhtml输出的时候如何实现换行的小技巧，其实很简单，在需要换行的地方加上/即可

在用innerHTML生成结构时，为了看起来结构明快，可以在每行的末尾加一个反斜线/，即可保持html原结构，而不至于将标签都挤在一块

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>innerHTML中标签可以换行的方法</title>

</head>

<body>

<script>

//function fnNew(){

var sHtml = '';

for(var i = 0; i < 2; i++){

sHtml += '<li class="in">/

<div class="in-con">/

<button class="in-btn_s">显示</button>/

<button class="in-btn_h">隐藏</button>/

</div>/

<div class="in-show">第'+ i +'种方法:'+ data[i]+'</div>/

</li>';

}

oList.innerHTML = sHtml;

}

</script>

</body>

</html>

我是今天才学到十八哥的Javascript 说到innerHMTL 的使用，当时老师说到里面的标签不换行我觉得自己如果以后操作肯定不方便，于是我把这段代码复制出来问了下做过编程的朋友们

function t2(){

var cont = document.getElementById('container');

var htmlcode = "<p><ul><li><span>东</span></li><li>南</li><li>西</li><li>北</li></ul></p>";

cont.innerHTML = htmlcode;