前端js Dom操作insertAdjacentHTML 相当于jQuery的append() prepend()等方法

前端开发常见面试题
前端开发面试笔试题
前端开发面试怎么自我介绍

element.insertAdjacentHTML(position, text);
beforeBegin:在该元素前插入
afterBegin:在该元素第一个子元素前插入
beforeEnd:在该元素最后一个子元素后面插入
afterEnd:在该元素后插入
html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>Title</title>
    </head>
    <body>
        <div>
            <p class=”text”>我是文本</p>
            <input id=”beforeBegin” type=”button” value=”beforeBegin” />
            <input id=”afterBegin” type=”button” value=”afterBegin” />
            <input id=”beforeEnd” type=”button” value=”beforeEnd” />
            <input id=”afterEnd” type=”button” value=”afterEnd” />
        </div>
    </body>
    <script>
        var a = document.querySelector(‘#beforeBegin’)
        var b = document.querySelector(‘#afterBegin’)
        var c = document.querySelector(‘#beforeEnd’)
        var d = document.querySelector(‘#afterEnd’)
        var oText = document.querySelector(‘.text’)
        a.onclick = function() {
            oText.insertAdjacentHTML(
                ‘beforeBegin’,
                ‘<p>beforeBegin:在对象之前;jquery的before()<p/>’,
            )
        }
        b.onclick = function() {
            oText.insertAdjacentHTML(
                ‘afterBegin’,
                ‘<p>afterBegin:在对象内容之前;jquery的prepend()<p/>’,
            )
        }
        c.onclick = function() {
            oText.insertAdjacentHTML(
                ‘beforeEnd’,
                ‘<p>beforeEnd:在对象内容之后; 相当于jquery的append()<p/>’,
            )
        }
        d.onclick = function() {
            oText.insertAdjacentHTML(
                ‘afterEnd’,
                ‘<p>afterEnd:在对象之后; 相当也jQuery 的after()<p/>’,
            )
        }
    </script>
</html>
大华前端开发面试题
腾讯前端开发面试题
js前端开发面试题
» 本文来自:前端开发者 » 《前端js Dom操作insertAdjacentHTML 相当于jQuery的append() prepend()等方法》
» 本文链接地址:https://www.rokub.com/7966.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!