jquery 互转 javascript_jq append转换成 js-CSDN博客

这篇博客介绍了如何在jQuery和JavaScript之间进行元素操作的转换，包括创建元素、在元素前后插入、作为子元素插入、移动元素、移除元素、添加和移除CSS类、修改属性、更改文本内容以及设置元素样式的方法。示例代码详细展示了两种语言的不同实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div id="trim">trim</div>
<div id="parent">
    <div id="1">1</div>
    <div id="2">2</div>
</div>
<div id="footer">footer</div>


/* Creating Elements（创建元素）
$('<div></div>');
document.createElement('div');*/

/* Inserting Elements Before & After（在元素前后插入）
$('#1').before('<div id="0.9">0</div>')
document.getElementById('1').insertAdjacentHTML('beforebegin','<div id="0.9">0</div>');
$('#1').after('<div id="0.9">0</div>')
document.getElementById('1').insertAdjacentHTML('afterend','<div id="0.8">99</div>');
*/

/* Inserting Elements As Children（作为子元素插入，内部插入）
$('#parent').prepend('<div id="newChild">newChild</div>');
document.getElementById('parent').insertAdjacentHTML('afterbegin','<div id="newChild">newChild</div>');
$('#parent').append('<div id="newChild2">newChild2</div>');
document.getElementById('parent').insertAdjacentHTML('beforeend','<div id="newChild2">newChild2</div>');
*/

/* Moving Elements（移动元素）
$('#parent').append('#trim');
document.getElementById('parent').appendChild(document.getElementById('trim'));
$('#parent').prepend($('#trim'));
document.getElementById('parent').insertBefore(document.getElementById('trim'), document.getElementById('1'));*/
/* Removing Elements（移除元素）
$('#foobar').remove();
document.getElementById('footer').parentNode.removeChild(document.getElementById('footer'));*/

/* Adding & Removing CSS Classes（添加&移除CSS样式类）
$('#1').addClass('bold');
document.getElementById('1').className += 'bold';
$('#foo').removeClass('bold');
document.getElementById('1').className = document.getElementById('1').className.replace(/^bold$/, ''); */

/* Adding/Removing/Changing Attributes（添加/移除/改变属性）
$('#foo').attr('role', 'button');
document.getElementById('foo').setAttribute('role', 'button');
$('#foo').removeAttr('role');
document.getElementById('foo').removeAttribute('role');
*/

/* Adding & Changing Text Content（添加 & 修改文本内容）
$('#foo').text('Goodbye!');
// IE 5.5+
document.getElementById('foo').innerHTML = 'Goodbye!';
// IE 5.5+ but NOT Firefox
document.getElementById('foo').innerText = 'GoodBye!';
// IE 9+
document.getElementById('foo').textContent = 'Goodbye!';
*/

/* Adding/Updating Element Styles（增加/更新元素的样式）
$('#note').css('fontWeight', 'bold');
document.getElementById('note').style.fontWeight = 'bold';
 */