javascript中还原append代码

JS实现jQuery的append功能

Show Me The Code
  • HTMLElement.prototype.appendHTML = function(html) {
    	let liTemp = document.createElement("li");
    	let nodes = null;
    	let fragment = document.createDocumentFragment();
    	liTemp.innerHTML = html;
    	nodes = liTemp.childNodes;
    	nodes.forEach(item => {
    		fragment.appendChild(item.cloneNode(true));
    	})
    	// 插入到最后 append
    	this.appendChild(fragment);
    	// 在最前插入 prepend
    	// this.insertBefore(fragment, this.firstChild);
    	nodes = null;
    	fragment = null;
    };
    
    
  • 测试下效果

    html

  • <style>
    .child {
      height: 50px;
      width: 50px;
      background: #66CCFF;
      margin-bottom: 1em;
    }
    </style>
    
    <li id="app">
      <li class="child">
      <li class="child">
    </li>
    
    
  • js

  • let app = document.getElementById('app');
    let child = `<li class="child">down</li>`;
    app.appendHTML(child);
    
    
  • 效果

    javascript中还原append代码(JS实现jQuery的append功能)

    PS

    另外, 如果想实现在上方插入的话, 只需要把代码里的this.appendChild(fragment); 改为 this.insertBefore(fragment, this.firstChild);

    另一种方法
  • var li2 = document.querySelector("#li2");
      li2.insertAdjacentHTML("beforebegin","<p>hello world</p>");//在调用元素外部前面添加一个元素
      li2.insertAdjacentHTML("afterbegin","<p>hello world</p>");//在调用元素的内部添加一个子元素并取代了第一个子元素
      li2.insertAdjacentHTML("beforeend","<p>hello world</p>");//在调用元素内部后面添加一个子元素 即取代了最后的子元素
      li2.insertAdjacentHTML("afterend","<p>hello world</p>");//在调用元素的外部后面添加一个元素
    
  • 浏览器的渲染的效果:

    javascript中还原append代码(JS实现jQuery的append功能)

    此方法是ie 的最早的方法所以兼容性特别好

    以上就是JS实现jQuery的append功能的详细内容,更多关于JS 实现jQuery append的资料请关注开心学习网其它相关文章!

    标签: