文章 - JavaScript Dom操作insertAdjacentHTML 相当于jQuery的append() prepend()等方法

JavaScript 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>

评论 ( 0 )

暂无评论

赶紧努力消灭 0 回复

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

评论 ( 0 )

最新评论

暂无评论

欢迎您回来

创建账号

找回密码