美文网首页
mui与原生js结合实现增加

mui与原生js结合实现增加

作者: 程序媛_ | 来源:发表于2021-06-10 11:37 被阅读0次

https://www.jb51.net/article/136842.htm

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

<link href="css/mui.css" rel="stylesheet" />

</head>

<body>

<ul id="out-ul" class="mui-table-view">

<li class="mui-table-view-cell mui-collapse out-li">

<a class="mui-navigate-right" href="#">面板1</a>

<div class="mui-collapse-content">

<p>面板1子内容</p>

</div>

</li>

</ul>

<button id="btn">添加</button>

<script>

document.getElementById('btn').addEventListener('click', function() {

var htmlFragment =

`<li class="mui-table-view-cell mui-collapse">

            <a class="mui-navigate-right" href="#">面板1</a>

            <div class="mui-collapse-content">

                <p>面板1子内容</p>

            </div>

        </li>`;

var addLi = document.createElement('li');

addLi.innerHTML = htmlFragment;

outUl.appendChild(addLi);

}, false);

var outUl = document.getElementById('out-ul')

var outLi = outUl.getElementsByClassName('out-li');

for (var i = 0; i < outLi.length; i++) {

outLi[i].onclick = function() {

alert(1);

}

}

</script>

<script src="js/mui.js"></script>

<script type="text/javascript">

mui.init()

</script>

</body>

</html>

相关文章

网友评论

      本文标题:mui与原生js结合实现增加

      本文链接:https://www.haomeiwen.com/subject/uuuueltx.html