点击添加li后，innerHtml 标签video，除了第一个li其他均无法生成video标签

Question

问题描述

工作要用转m3u8视频流，用videojs实现，但是通过点击事件生成视频第一个显示正常，新增第二个时只有空li标签无内容

问题出现的环境背景及自己尝试过哪些方法

相关代码

        var a=0;
        function cc() {
            a++;
            var one = document.getElementById('one');
            var newStr = '';
            var Li = document.createElement('li');
            one.appendChild(Li);
            var oLi = one.getElementsByTagName('li');
            newStr +=' <video id="example_video_'+a+'" class="video-js vjs-default-skin" controls preload="none" muted loop>';
            newStr +='<source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL">';
            newStr +='</video>'
            oLi[a-1].innerHTML = newStr;

            var player = videojs('example_video_'+a, {
                muted: true,
                controls: true,
                height: 100,
                width: 100,
                loop: true,
            });
            console.log(a)
        }

你期待的结果是什么？实际看到的错误信息又是什么？

        var a=0;
        function cc() {
            a++;
            var one = document.getElementById('one');
            var newStr = '';
            var Li = document.createElement('li');
            newStr +=' <video id="example_video_'+a+'" class="video-js vjs-default-skin" controls preload="none" muted loop>';
            newStr +='<source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL">';
            newStr +='</video>'
            li.innerHTML = newStr;
            one.appendChild(Li);
            var player = videojs('example_video_'+a, {
                muted: true,
                controls: true,
                height: 100,
                width: 100,
                loop: true,
            });
            console.log(a)
        }

代码改动如上就解决了问题，希望能解释下原因

Answer 1

innerHTML 添加的是纯字符串，不能获取内部元素的属性；

appendChild 添加的是dom对象，返回的也是 dom 对象，可以通过 dom 对象访问获取元素的各种属性。

应该是这俩方法的顺序导致的。