js插入标签位置

<button onclick="innerHTML_()">innerHTML</button>
<div id="innerHTML">我是内容</div>
<button onclick="beforeBegin()">beforeBegin</button>
<div id="beforeBegin">我是内容!</div>
<button onclick="afterBegin()">afterBegin</button>
<div id="afterBegin">我是内容!</div>
<button onclick="beforeEnd()">beforeEnd</button>
<div id="beforeEnd">我是内容!</div>
<button onclick="afterEnd()">afterEnd</button>
<div id="afterEnd">我是内容!</div>
<br/><br/>
<script type="text/javascript">
    var dom = {
        innerHTML: document.getElementById('innerHTML'),
        beforeBegin: document.getElementById('beforeBegin'),
        afterBegin: document.getElementById('afterBegin'),
        beforeEnd: document.getElementById('beforeEnd'),
        afterEnd: document.getElementById('afterEnd')
    };
    var buttonHtml = '<button type="button" onclick="alert()">点我试试</button>';
    function innerHTML_() {
        dom.innerHTML.innerHTML += buttonHtml;
    }
    function beforeBegin() {
        dom.beforeBegin.insertAdjacentHTML('beforeBegin', buttonHtml);
    }
    function afterBegin() {
        dom.afterBegin.insertAdjacentHTML('afterBegin', buttonHtml);
    }
    function beforeEnd() {
        dom.beforeEnd.insertAdjacentHTML('beforeEnd', buttonHtml);
    }
    function afterEnd() {
        dom.afterEnd.insertAdjacentHTML('afterEnd', buttonHtml);
    }
</script>

猜你喜欢

转载自blog.csdn.net/qq_36311091/article/details/80665400