JQuery和js对dom节点操作的区别

xiaoxiao2021-02-28  8

注意:

1. 通常创建文本节点和创建元素节点配合使用,比如:

   var textEl = document.createTextNode("Hello World.");    var pEl = document.createElement("p");

   pEl.appendChild(textEl);

2. 克隆节点要避免`ID重复,true:深层复制,false:浅层复制

3. 替换时oldNode必须是parentEl真实存在的一个子节点

Js和jquery操作dom节点的区别

Dom操作

Js

Jquery

创建元素节点

document.createElement("p");

$('<p></p>');

创建并添加文本节点

document.createTextNode("Text Content");

var $p = $('<p>Hello World.</p>');

复制节点

var newEl = pEl.cloneNode(true);

$newEl = $('#pEl').clone(true);

插入节点

El.appendChild(newNode);(末尾插入)

$('#El').append('<p>Hello World.</p>');

或$('<p>Hello World.</p>').appendTo('#El');(末尾插入)

$('#El').after('<p>Hello World.</p>');

或$('<p>Hello World.</p>').insertAfter('#El');

El.insertBefore(newNode, targetNode);(首头插入)

$('#El').prepend('<p>Hello World.</p>');

或$('<p>Hello World.</p>').prependTo('#El');(首头插入)

$('#El').before('<p>Hello World.</p>');

或$('<p>Hello World.</p>').insertBefore('#El');

删除节点

El.parentNode.removeChild(El);

$('#El').remove();

替换节点

El.repalceChild(newNode, oldNode);

$('p').replaceWith('<p>Hello World.</p>');

设置属性/获取属性

imgEl.setAttribute("title", "logo");

imgEl.getAttribute("title");

$("#logo").attr({"title": "logo"});

$("#logo").attr("title");

转载请注明原文地址: https://www.6miu.com/read-2149998.html

最新回复(0)