js插入标签位置

最新推荐文章于 2024-08-11 00:22:53 发布

流浪大叔

最新推荐文章于 2024-08-11 00:22:53 发布

阅读量2.5k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_36311091/article/details/80665400

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<button οnclick="innerHTML_()">innerHTML</button>
<div id="innerHTML">我是内容</div>
<button οnclick="beforeBegin()">beforeBegin</button>
<div id="beforeBegin">我是内容！</div>
<button οnclick="afterBegin()">afterBegin</button>
<div id="afterBegin">我是内容！</div>
<button οnclick="beforeEnd()">beforeEnd</button>
<div id="beforeEnd">我是内容！</div>
<button οnclick="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" οnclick="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>