JQuery是一個非常流行的JavaScript庫,它擁有很多實用的函數和方法,讓我們可以更加方便地操作DOM。
其中,after()和before()方法可以讓我們在目標元素的前后插入新的元素。
$(target).after(newContent); //在目標元素之后插入新元素 $(target).before(newContent); //在目標元素之前插入新元素
其中,target
是我們要插入的位置,可以是選擇器、DOM元素、JQuery對象等。
newContent
則可以是HTML字符串、DOM元素、JQuery對象等。我們可以使用字符串模板或者創建新的元素來生成新的內容。
var str = '<div>Hello World!</div>'; var newEle = $('').html('Hello World!'); $(target).after(str); $(target).before(newEle);
需要注意的是,如果我們要插入多個新元素,可以將它們包裝在一個新的DOM元素中,并插入到目標元素前后:
var str1 = '<div>One</div>'; var str2 = '<div>Two</div>'; var newEle = $('').html(str1 + str2); $(target).after(newEle);
使用after()
和before()
方法,可以讓我們快速實現插入元素的操作,優化頁面結構,提升用戶體驗。